Spec issue tracking further discussion: https://github.com/w3c/csswg-drafts/issues/11859
On Thursday, March 6, 2025 at 1:09:24 PM UTC-8 Alison Maher wrote: > 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/794438bb-1e45-4b6e-811d-3b8447f74b8bn%40chromium.org.
