- From: Philip Walton <philip@philipwalton.com>
- Date: Fri, 28 Nov 2014 17:06:39 -0800
- To: Hayato Ito <hayato@google.com>
- Cc: www-style list <www-style@w3.org>
- Message-ID: <CAGRhNhWw1+a0X1Ehbnd-D=PLqwQrN-HkTzF06ttpZ2wF71rneA@mail.gmail.com>
Thanks Hayoto, I didn't realize `content` and `shadow` could be used in selectors. I assumed they were "invisible". However, when trying that I noticed something else. The follow two selectors seem to target the same elements, and that seems strange to me: :host::shadow::content > * :host::shadow ::content > * Notice the space (descendant combinator) in the second selector. Based on what you've said about `content::content` and `shadow::content` it doesn't seem like the first selector above should match anything, unless ::content isn't really a pseudo-element the same way ::shadow, ::before, and ::first-letter are pseudo-elements. On Thu, Nov 27, 2014 at 8:57 PM, Hayato Ito <hayato@google.com> wrote: > BTW, you can use > ':host::shadow content::content > *' > to avoid it matches shadow insertion points. > > On Fri Nov 28 2014 at 3:11:34 AM Philip Walton <philip@philipwalton.com> > wrote: > >> 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 Saturday, 29 November 2014 01:07:08 UTC