Description

With a :host() selector referencing the root of an element with a shadow root, it holds that :host(:has(...) should reference light DOM children of that root. Some browsers acknowledge this truth (Safari), others don't (Chrome), others have yet to ship :has() support (Firefox).

Example: https://codepen.io/Westbrook/pen/KKoJNGm

In Safari with :has() support you get:

In Chrome with :has() support you get:

Rationale

There's no way to "know" what content has been slotted into a shadow root carrying element without leveraging JS API. The combination of :host() and :has() to form :host(:has()) means that advanced JS APIs are no longer required in order to style content (both in the shadow and light DOM).

Specification

https://drafts.csswg.org/selectors-4/#relational

Tests

• Basic :has() tests: https://wpt.fyi/results/css/selectors?label=master&label=experimental&aligned&view=subtest&q=has
• General :host() tests: https://wpt.fyi/results/css?label=master&label=experimental&aligned&view=subtest&q=host

I'm not sure (can't locate any) there are currently tests for this specific situation, but there should be!