:host(:has(...)) pointing to light DOM content

[Westbrook]

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!

[michaelwarren1106]

+1!

this would be amazing! imo one of the bad parts about slots is that it’s almost impossible to “enforce” what gets slotted into them. a lot of composable components depend on documentation and the components consumer to just do the right thing, but this could help us deal with more edge cases when an unexpected element gets slotted into a slot.

[Westbrook]

@michaelwarren1106 I'd actually see #207 as being able to more fully enforce the contract that you're talking about there?

[karlcow]

The closest seemed to be
https://wpt.fyi/css/selectors/invalidation/host-pseudo-class-in-has.html
but the code is

      .subject:has(:is(:host-context(.a) > .foo .bar)) { color: green }
      .subject:has(:is(:host(.a) > .foo .bar)) { color: yellowgreen }
      .subject:has(:is(:host-context(.a) .bar)) { color: blue }
      .subject:has(:is(:host(.a) .bar)) { color: skyblue }

https://github.com/web-platform-tests/wpt/blob/ad38dc9a1d/css/selectors/invalidation/host-pseudo-class-in-has.html

tests using :host()

https://wpt.fyi/css/css-scoping/css-scoping-shadow-host-functional-rule.html
https://wpt.fyi/css/css-scoping/host-specificity-003.html
https://wpt.fyi/css/css-scoping/host-parsing.html
https://wpt.fyi/css/css-scoping/shadow-host-with-before-after.html
https://wpt.fyi/css/css-scoping/host-specificity.html
https://wpt.fyi/css/css-scoping/host-functional-descendant-invalidation.html
https://wpt.fyi/css/css-scoping/css-scoping-shadow-host-namespace.html
https://wpt.fyi/css/css-scoping/slotted-parsing.html
https://wpt.fyi/css/css-shadow-parts/host-part-001.html
https://wpt.fyi/css/css-contain/container-queries/container-for-shadow-dom.html
https://wpt.fyi/css/cssom/CSSStyleSheet-constructable.html
https://wpt.fyi/css/selectors/is-specificity-shadow.html
https://wpt.fyi/css/selectors/is-where-parsing.html
https://wpt.fyi/css/selectors/parsing/parse-not.html
https://wpt.fyi/css/selectors/invalidation/host-pseudo-class-in-has.html
https://wpt.fyi/css/selectors/is-where-shadow.html
https://wpt.fyi/custom-elements/state/tentative/state-pseudo-class.html

tests using :has()

https://wpt.fyi/css/selectors/has-matches-to-uninserted-elements.html
https://wpt.fyi/css/selectors/has-error-recovery.html
https://wpt.fyi/css/selectors/has-visited.html
https://wpt.fyi/css/selectors/has-argument-with-explicit-scope.html
https://wpt.fyi/css/selectors/has-specificity.html
https://wpt.fyi/css/selectors/has-relative-argument.html
https://wpt.fyi/css/selectors/has-basic.html
https://wpt.fyi/css/selectors/parsing/parse-has.html
https://wpt.fyi/css/selectors/parsing/parse-has-disallow-nesting-has-inside-has.html
https://wpt.fyi/css/selectors/invalidation/link-pseudo-in-has.html
https://wpt.fyi/css/selectors/invalidation/target-pseudo-in-has.html
https://wpt.fyi/css/selectors/invalidation/user-action-pseudo-classes-in-has.html
https://wpt.fyi/css/selectors/invalidation/has-in-parent-position.html
https://wpt.fyi/css/selectors/invalidation/has-with-pseudo-class.html
https://wpt.fyi/css/selectors/invalidation/has-in-ancestor-position.html
https://wpt.fyi/css/selectors/invalidation/host-pseudo-class-in-has.html
https://wpt.fyi/css/selectors/invalidation/location-pseudo-classes-in-has.html
https://wpt.fyi/css/selectors/invalidation/has-complexity.html
https://wpt.fyi/css/selectors/invalidation/is-pseudo-containing-complex-in-has.html
https://wpt.fyi/css/selectors/invalidation/has-in-sibling-position.html
https://wpt.fyi/css/selectors/invalidation/input-pseudo-classes-in-has.html
https://wpt.fyi/css/selectors/invalidation/child-indexed-pseudo-classes-in-has.html
https://wpt.fyi/css/selectors/invalidation/has-with-not.html
https://wpt.fyi/css/selectors/invalidation/empty-pseudo-in-has.html
https://wpt.fyi/css/selectors/invalidation/typed-child-indexed-pseudo-classes-in-has.html
https://wpt.fyi/css/selectors/invalidation/attribute-or-elemental-selectors-in-has.html
https://wpt.fyi/css/selectors/invalidation/has-in-adjacent-position.html
https://wpt.fyi/css/selectors/invalidation/has-sibling.html
https://wpt.fyi/css/selectors/invalidation/modal-pseudo-class-in-has.html
https://wpt.fyi/css/selectors/invalidation/not-pseudo-containing-complex-in-has.html
https://wpt.fyi/dom/nodes/Element-closest.html

[karlcow]

Some discussions also in

• [selectors] Pseudo class to indicated when a slot has content w3c/csswg-drafts#6867
• The opposite [selectors-4] Consider disallowing :host, :host(), :host-context() inside :has() w3c/csswg-drafts#7212 similar to the test up there.

@Westbrook did you open an issue in the CSS WG about this? It seems it would be a better avenue than here? no?

[Westbrook]

@karlcow my understanding is that this IS spec, which is why Safari implemented it, but Chrome has lingering security questions, which is why their implementation is not interoperable with Safari’s. If FireFox implemented to spec, it would only be an Interop issue?

[nairnandu]

Thank you for proposing :host(:has(...)) pointing to light DOM content for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. As discussed in the issue, there are tests for :host and for :has in WPT, but none were identified for :host(:has(...)). Resubmitting a proposal when tests are written as part of a future round of Interop would be welcome.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.