[css-shadow-parts] match parts of the current shadow root

[jonathantneal]

Background: To match a shadow part from outside its own shadow root, we use the ::part() pseudo-element selector.

::part(day weekend) {
  color: blue;
}

That selector will have a calculated specificity of 1 Type.

Issue: To match a shadow part from within its own shadow root, we use CSS attribute selector. It feels rather inelegant because of how dissimilar it is to the ::part() selector.

[part~="day"][part~="weekend"] {
  color: blue;
}

That selector will have a different calculated specificity; 2 Classes. To match the ::part() specificity of 1 Type, we must add additional selector trickery.

:where([part~="day"][part~="weekend"]):not(_) {
  color: blue;
}

That selector feels very long, cryptic, and too dissimilar from its light ::part() counterpart.

Recommendation: May we add a :host-part() pseudo-class selector to match elements with the given parts?

:host-part(day weekend) {
  color: blue;
}

Edit: @Westbrook was kind enough to point out a far more readable fallback. It won’t match the suggested specificity, but it is far more readable.

:host::part(day weekend) {
  color: blue;
}

[brandonmcconnell]

+1

Makes total sense to me. This API would greatly simplify working with Shadow DOM parts. 👏🏼

[emilio]

Those two specificities don't compete because the style sheets are in separate trees, fwiw.

[emilio]

:host::part(..) should work in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1624968) and it's a bug that it doesn't work in other browsers afaict.

[emilio]

Though apparently other browsers also fixed it?

[jonathantneal]

Thank you, @emilio. If evergreen browser support for :host::part() is good, then I will close this, as the value for the syntactic sugar would be quite low.

Those two specificities don't compete because the style sheets are in separate trees, fwiw.

Ah, thank you. Like ::before and ::after having explicit combinators, I forget this quality of CSS. I appreciate the refresher.