W3C home > Mailing lists > Public > www-style@w3.org > November 2014

Re: [css-scoping] should `::content` match both <content> and <shadow> insertion points?

From: Philip Walton <philip@philipwalton.com>
Date: Fri, 28 Nov 2014 17:06:39 -0800
Message-ID: <CAGRhNhWw1+a0X1Ehbnd-D=PLqwQrN-HkTzF06ttpZ2wF71rneA@mail.gmail.com>
To: Hayato Ito <hayato@google.com>
Cc: www-style list <www-style@w3.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:48 UTC