Allow ::slotted(selectors)

[JamesXNelson]

::slotted selectors are necessary for ShadowDOM V1

It may make sense to allow ::anyname(selectors) instead of cherry-picking individual named selectors, but I do not know the code well enough to make such a judgement.

"If" tests are desired, let me know where to add them, and I can add that to PR.

[iflan]

Hi James,

Looking at ::slotted, it seems to have pretty specific semantics. Generally, from what I see, it's pretty hard to predict what should go in a pseudo element, so I don't think your generic proposal is a good fit yet.

It looks like Shadow DOM is also introducing a new selector, >>>, the shadow-piercing descendant combinator.

As far as the PR goes, I will need tests for it. I don't have time to do that in depth tonight, but I'll try to get to it soon.

Ian

[iflan]

(And by "do that", I meant "review the code".)

[JamesXNelson]

Heya.

As I continued to work with shadow DOM, I also needed :host(selectors > here), and :host-context(selectors > here) as well.

If you have any existing css infrastructure testing, I would be happy to put together an automated test. I see GssParserTest is probably good enough for this?

I think there is also support for ::slotted(div)::before as well, so it might start getting a touch more complicated if we want to hit the moving target that is shadow dom css. Let me know how I can be of assistance to get some (useful) code merged!

[JamesXNelson]

Note, the current working draft says that >>> combinators will only apply to querySelector(), and not css styling.

So, unless/until that changes, the most you'd want to do is issue a warning to developers that attempting to use this in a stylesheet will not work.

Also note, the draft shows ::slotted as containing complex selectors, but the discussion it is based on in the web component spec authors' github repo, the consensus was to support simple selectors only, as ::slotted(div.foo) with ::slotted(.foo)::before also supported; the idea being that you can only match the top-level children of a slot, so no combinator would ever make sense.

I made the PR match the recommendations I was able to grok from the still evolving spec:

"Note: ::slotted() can only represent the elements assigned to the slot. Slots can also be assigned text nodes, which can’t be selected by ::slotted(). The only way to style assigned text nodes is by styling the slot and relying on inheritance."

If we want to be pedantic, the only usable prefixes of ::slotted is empty ::slotted, slot::slotted or *::slotted; any other combination won't work, because only <slot /> elements can have a slotted pseudo.

[JamesXNelson]

Hi @iflan

Sorry I kind of forgot about this pull request.

I updated the comment per your request in the BNF.

I don't think we decided on any naming for splitting up the pseudo definition. I'd be happy to break it up if you decide what you want and let me know. Thanks!

[JamesXNelson]

I'll add some tests shortly.

[Jauhen]

It would be great if you also add support for ::cue() pseudo selector: https://w3c.github.io/webvtt/#css-extensions-introduction

[ghost]

Custom Elements we're the perfect solution for me, until i couldn't style the children.. I do not get how custom elements are of any use without that.