[css-shadow-parts] Can I use ::slotted and ::part together?

[runarberg]

From my understanding, the compound selector allows selecting a pseudo element. So I’m wondering if we can select a shadow part of a slotted custom element?

::slotted(my-element::part(my-shadow-part)) {
  /* ... */
}

I’ve tried this in Chrome and Firefox and it doesn’t work. I’ve also tried the selector as if ::part was tree abiding:

::slotted(my-element)::part(my-shadow-part)

And unsurprisingly it didn’t work either.

My question is: Is the former example a bug in the implementation or is the ::part pseudo element not accessible with ::slotted by design?

[emilio]

I can see how this could be useful, in principle at least...

In practice it's slightly annoying to do implementation wise, as the part itself could be slotted, and this increases a lot the amount of trees that rules can come from for a given element (which in practice can have performance implications)... Probably not impossible though.

[runarberg]

Note that I was only experimenting, there are other ways of achieving my goal. E.g. my custom element could dynamically set a property on the child custom element and then I can just move the rules to the shadow styles of the slotted element.

What I ended up doing though is just export a global stylesheet with my library and moved the rules to there:

<my-element>Here the part has a default style</my-element>
<my-container>
  <my-element>
    A shadow part is styled differently because we are a slotted child of
    <code>&lt;my-container&gt;</code>.
  </my-element>
</my-container>

/* exported global stylesheet */
my-container my-element::part(my-shadow-part) {
  /* ... */
}

[emilio]

This is a dupe of #3896, closing as such.