Bug 232261

Summary: :host::part(foo) selector does not select elements inside shadow roots
Product: WebKit Reporter: Nolan Lawson <nlawson>
Component: CSSAssignee: Antti Koivisto <koivisto>
Status: RESOLVED FIXED    
Severity: Normal CC: allan.jensen, emilio, esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, koivisto, macpherson, menard, rniwa, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
Patch none

Nolan Lawson
Reported 2021-10-25 12:51:19 PDT
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
Attachments
Patch (10.41 KB, patch)
2021-11-04 01:01 PDT, Antti Koivisto 		no flags
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Antti Koivisto
Comment 1 2021-10-29 23:12:54 PDT
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.
Emilio Cobos Álvarez (:emilio)
Comment 2 2021-10-30 01:21:00 PDT
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.
Antti Koivisto
Comment 3 2021-10-30 01:56:14 PDT
Ah right, :host::part does work in FF.
Nolan Lawson
Comment 4 2021-11-01 08:36:23 PDT
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.)
Nolan Lawson
Comment 5 2021-11-01 08:37:49 PDT
Renamed the bug title to focus on `:host::part(foo)`, not `::part(foo)`.
Radar WebKit Bug Importer
Comment 6 2021-11-01 12:52:23 PDT
<rdar://problem/84894922>
Antti Koivisto
Comment 7 2021-11-04 01:01:57 PDT
Created attachment 443283 [details] Patch
Simon Fraser (smfr)
Comment 8 2021-11-04 08:51:04 PDT
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?
EWS
Comment 9 2021-11-04 09:15:21 PDT
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].
Nolan Lawson
Comment 10 2021-11-04 09:33:11 PDT
This is awesome! Thank you!!
Antti Koivisto
Comment 11 2021-11-04 09:53:04 PDT
Thanks for reporting!
Note You need to log in before you can comment on or make changes to this bug.