- From: Hayato Ito <hayato@google.com>
- Date: Fri, 28 Nov 2014 04:57:54 +0000
- To: Philip Walton <philip@philipwalton.com>, www-style list <www-style@w3.org>
- Message-ID: <CAFpjS_3kd2eOZCkT=Jxjcm3z7NuhTu8JGMzoZpeh4EK=nVKw4Q@mail.gmail.com>
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 Friday, 28 November 2014 04:58:23 UTC