Using CSS like:
...does not work inside of shadow roots to select CSS shadow parts.
Here are two examples to demonstrate:
These two examples work in Firefox v93 (i.e. the font color is blue), but not Safari Tech Preview 15.4 release 133.
Incidentally, Chrome also fails this test, and there is a Chrome bug already open: https://crbug.com/980506
The first one is clearly wrong, ::part should not match in the current scope. That it works in Firefox seems like a bug.
The second one doesn't work in any browser. It is unclear if it should work since :host is such a poorly defined special case.
Yeah, so `:host::part()` works intentionally in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=1624968). I think the fact that bare `::part()` matches in that scope is an accidental change introduced by that bug's changes, but should probably be considered a bug.
Ah right, :host::part does work in FF.
Thanks for the clarification. I can understand the case for having `:host::part(foo)` work, whereas `::part(foo)` shouldn't work. I suppose `::part(foo)` gets ambiguous if a component contains other components with the same part name.
From a web developer's perspective, I think having just `:host::part(foo)` is adequate – the main thing is to have some way to reference one's own parts from within a component. (Of course `[part="foo"]` also works, but it feels a bit hacky since it's the part that matters, not the attribute.)
Renamed the bug title to focus on `:host::part(foo)`, not `::part(foo)`.
Created attachment 443283 [details]
Comment on attachment 443283 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=443283&action=review
> + MatchResult result = matchRecursively(checkingContext, nextContext, ignoreDynamicPseudo);
Committed r285262 (243873@main): <https://commits.webkit.org/243873@main>
All reviewed patches have been landed. Closing bug and clearing flags on attachment 443283 [details].
This is awesome! Thank you!!
Thanks for reporting!