Using CSS like: ::part(foo) { color: blue; } Or: :host::part(foo) { color: blue; } ...does not work inside of shadow roots to select CSS shadow parts. Here are two examples to demonstrate: - https://codepen.io/nolanlawson-the-selector/pen/GRjxEYZ - https://codepen.io/nolanlawson-the-selector/pen/jOLBxad 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)`.
<rdar://problem/84894922>
Created attachment 443283 [details] Patch
Comment on attachment 443283 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=443283&action=review > Source/WebCore/css/SelectorChecker.cpp:418 > + MatchResult result = matchRecursively(checkingContext, nextContext, ignoreDynamicPseudo); auto?
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!