Bug 232261

Summary:

:host::part(foo) selector does not select elements inside shadow roots

Product:

WebKit

Reporter:

Nolan Lawson <nlawson>

Component:

CSS

Assignee:

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:

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	Details Formatted Diff Diff
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.