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

• Component: CSS
• Status: RESOLVED FIXED

[Nolan Lawson]

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

[Antti Koivisto]

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)]

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]

Ah right, :host::part does work in FF.

[Nolan Lawson]

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]

Renamed the bug title to focus on `:host::part(foo)`, not `::part(foo)`.

[Radar WebKit Bug Importer]

<rdar://problem/84894922>

[Antti Koivisto]

Created attachment 443283 [details]
Patch

[Simon Fraser (smfr)]

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]

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]

This is awesome! Thank you!!

[Antti Koivisto]

Thanks for reporting!