- From: Philip Walton <philip@philipwalton.com>
- Date: Thu, 27 Nov 2014 10:08:58 -0800
- To: www-style list <www-style@w3.org>
- Message-ID: <CAGRhNhXxQemzQDMYZyg77Je8-9cqCTRAqoUHR8YLFeAbZ40E3A@mail.gmail.com>
I've been experimenting with various "inheritance" techniques using web components, and I encountered what I consider to be unexpected behavior in Chrome. Here's a jsbin example: http://jsbin.com/lonugosoxo/1/edit?html,output To summarize, I'm creating two shadow roots on an element. The younger shadow root contains a <shadow> insertion point and the older shadow root contains a <content> insertion point. In the younger shadow DOM I have a <style> defined as follows: :host::shadow ::content > * { border: 1px solid; margin: .5em; padding: .5em; } Since there is only one <content> insertion point, and since the element in the main DOM only has one set of children, I'd expect this selector to only match the element's children in the main DOM, but as you can see from the example, it's also matching the <nav> element in the older shadow root (if you look at the example, I would have expected that only the links would have borders). If this behavior is considered correct, I'd argue it's confusing and maybe `::content` should have a different name, since insertion points can also be created with a <shadow> tag. If this behavior is incorrect, well, I guess I'll report a bug.
Received on Thursday, 27 November 2014 18:09:26 UTC