Intent to Prototype: Nesting of :has() and :host() CSS Selectors

[Alison Maher]

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

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, :has, :host(), :has(), :host:has(), :host:has, :host(:has()), 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?

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.

[Alison Maher]

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 that "Since :has() takes a <relative-selector-list>, its arguments are inherently complex selectors (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

[Alison Maher]

Spec issue tracking further discussion: https://github.com/w3c/csswg-drafts/issues/11859