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

I've never seen the usage of the first one, which is using consecutive
pseudo elements.  If that works in blink, that's unintentional and should
be considered the bug in blink.

AFAIK, the first one should be considered wrong grammatically because
selector 4 [1] says:

> pseudo
>   /* '::' starts a pseudo-element, ':' a pseudo-class */
>   /* Exceptions: :first-line, :first-letter, :before and :after. */
>   /* Note that pseudo-elements are restricted to one per selector and */
>   /* occur only in the last compound_selector. */
>   : ':' ':'? [ IDENT | functional_pseudo ]
>   ;

[1] http://dev.w3.org/csswg/selectors4/#grammar


On Sat Nov 29 2014 at 10:06:41 AM Philip Walton <philip@philipwalton.com>
wrote:

> 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 Monday, 1 December 2014 05:42:44 UTC