:host(.foo, .bar) should be an invalid selector

• Component: CSS
• Status: RESOLVED DUPLICATE

[Nolan Lawson]

Per the CSS spec (https://w3c.github.io/csswg-drafts/css-scoping/#host-selector), `:host()` accepts a compound selector. However, in WebKit it seems to support a selector list.

This leads to different behavior between WebKit and Chromium/Firefox in this case:

    :host(.foo, .bar) { }

Chromium and Firefox ignore the selector, whereas WebKit styles a host with the "foo" class. Here is a CodePen demo: https://codepen.io/nolanlawson-the-selector/pen/gOKVBMO . (The attached HTML file is equivalent.)

In this demo, the CSS rule sets the test color to red. In WebKit the text appears red, whereas in Chromium and Firefox it appears black.

Tested in Safari Technology Preview 146 (Safari 15.4, WebKit 16614.1.14.10.6).

May be related to: https://bugs.webkit.org/show_bug.cgi?id=220532

[Nolan Lawson]

Created attachment 464059 [details]
Repro comparison in Chromium, Firefox, and WebKit

[Nolan Lawson]

Created attachment 464060 [details]
Minimal repro

[Radar WebKit Bug Importer]

<rdar://problem/103645394>

[Ahmad Saleem]

Safari 16.6 is now matching Chrome Canary 117 and Firefox Nightly 118 in minimal repo and it seems to be fixed now.

Marking this as 'RESOLVED CONFIGURATION CHANGED" and CCing - Tim for any input.

[Tim Nguyen (:ntim)]

*** This bug has been marked as a duplicate of bug 222733 ***