Clarification which pseudo selectors work with `::slotted` and `::part`

[MendyBerger]

I've been trying to figure out lately which pseudo selectors are working with ::slotted and ::part and which don't, I can't seem to find an official list, I've seen some references to simple selectors, but I can't figure out what counts as a simple selector and what counts as a complex selector .

So my question is, is there an official list of selectors that work with ::slotted and ::part? If yes, where can I find it?

Hope this is not out of scope for this repo, I've tried stack overflow in the past but it didn't bear any fruits https://stackoverflow.com/questions/67936212/combining-the-slotted-and-part-pseudo-elements https://stackoverflow.com/questions/68166993/combining-slotted-with-pseudo-elements

[claviska]

I can't offer a definitive list of all pseudo selectors that work with ::slotted, but I can say that, unfortunately, ::slotted and ::part do not work together. In other words, it's not currently possible to target a slotted custom element's part. 😞

I agree that it would be helpful to have this more clearly defined.

[Jamesernator]

Just one note before you read the following and that's that browsers may not implement the spec entirely, but as for what's actually specified this is what I could find.

So the stuff about complex/simple selectors is actually to do with stuff that goes inside of the call. In ::slotted's case this is actually neither of them but rather specified to be a compound selector. The definition of each of these types of selectors is here.

As for what pseudo selectors work after ::slotted(), as it selects elements, any pseudo-class that works on elements should work on ::slotted(). Although it's weird because as it accepts a compound selector all pseudo classes can already be inside the ::slotted(), i.e. ::slotted(:visited) should be the same as ::slotted(*):visited. This should probably be clarified in that spec as to what this is supposed to accept.

For pseudo elements that work after ::slotted() the spec also says it is precisely tree-abiding pseudo elements, so that includes things like ::before/::after and everything else in section 4 there. Now ::part isn't specified as a tree-abiding pseudo element but it is wanted.

Now for ::part(), the actual inside of ::part() doesn't accept a selector, it just takes a list of identifiers which are just a list of names for corresponding part="name" or exportparts="innerName:name" attributes inside the shadow root.

The pseudo classes ::part supports is more explicit, essentially ::part is also an element selector, so anything that works on elements should work, except that ::part specifically bans structural pseudo classes.

The pseudo elements ::part is also specifically specified to allow any pseudo elements EXCEPT for other ::parts.