As an update, I was chatting with Tab about this since there were conflicting statements about whether this was allowed per the spec, but based on the conclusion, this change would require a spec change.
The CSS Selectors spec notes <https://drafts.csswg.org/selectors-4/#relational> that "Since :has() <https://drafts.csswg.org/selectors-4/#has-pseudo> takes a <relative-selector-list> <https://drafts.csswg.org/selectors-4/#typedef-relative-selector-list>, its arguments are inherently complex selectors <https://drafts.csswg.org/selectors-4/#complex> (because they start, perhaps implicitly, with a combinator). This means :has() cannot be used in contexts that don’t allow complex selectors; its arguments will be guaranteed to be invalid." And :host() is defined to take a <compound-selector>. This conflicts with the tests added in https://github.com/web-platform-tests/wpt/pull/47441, which indicate that :host(:has()) is supported. I'll plan to open a new issue on the CSSWG to discuss further, and I can look into making the relevant tests tentative in the meantime. (:host:has(), on the other hand, was resolved to be accepted per https://github.com/w3c/csswg-drafts/issues/10693, so I have since marked those tests as non-tentative. This selector combination is already working as expected in Chromium). Thanks, Alison On Thursday, March 6, 2025 at 8:41:55 AM UTC-8 Alison Maher wrote: > Contact emails > alm...@microsoft.com > > Explainer > None > > Specification > https://drafts.csswg.org/selectors-4 > > Summary > Add support for matching the :host(:has()) selector combination, allowing > authors to select the host element if it has a descendent in the light DOM > matching a provided relative selector list. Chromium already supports the > :host:has() variant, which is similar to :host(:has()), but instead checks > against descendants in the shadow DOM. > > > Blink component > Blink>CSS > <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> > > Motivation > Web authors who utilize Shadow DOM would like a way to style the shadow > host if one of its descendants matches a selector (using the :has() > functional pseudo-class). For example, authors would like > :host(:has(input:checked)) to match the :host if it has a light DOM > descendant matching input:checked. The following test case illustrates an > author using a combination of :host() and :has(). This test case already > works in Firefox and Safari. > https://lit.dev/playground/#gist=1115384b101b8a90aef8fef5149115e6 > > > Initial public proposal > None > > Search tags > :host <https://chromestatus.com/features#tags::host>, :has > <https://chromestatus.com/features#tags::has>, :host() > <https://chromestatus.com/features#tags::host()>, :has() > <https://chromestatus.com/features#tags::has()>, :host:has() > <https://chromestatus.com/features#tags::host:has()>, :host:has > <https://chromestatus.com/features#tags::host:has>, :host(:has()) > <https://chromestatus.com/features#tags::host(:has())>, selector > <https://chromestatus.com/features#tags:selector> > > TAG review > None > > TAG review status > Not applicable > > Risks > > > Interoperability and Compatibility > No major risks as full/partial support for :host(:has()) already exists in > other browsers. > > > *Gecko*: Shipped/Shipping > > *WebKit*: Shipped/Shipping > > *Web developers*: Positive ( > https://github.com/w3c/csswg-drafts/issues/7953) > > WebView application risks > *Does this intent deprecate or change behavior of existing APIs, such that > it has potentially high risk for Android WebView-based applications?* > None > > > Debuggability > DevTools already provides support for exposing CSS selectors and computed > styles. > > > Is this feature fully tested by web-platform-tests > <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> > ? > Yes > > https://wpt.fyi/results/css/css-scoping?label=master&label=experimental&aligned&q=host%20has-0 > > > Finch feature name > CSSNestHostHasSelectors > > Requires code in //chrome? > False > > Tracking bug > https://issues.chromium.org/issues/40062355 > > Link to entry on the Chrome Platform Status > https://chromestatus.com/feature/5658105834373120?gate=5256965787484160 > > This intent message was generated by Chrome Platform Status > <https://chromestatus.com/>. > > -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68203cd7-d96b-4385-8273-ec0a5804ce84n%40chromium.org.
