:has(...) pseudo-class use with :host

[Westbrook]

Description

The :host selector on a shadow root is handicapped in many browsers by not being allowed to relate to the :has(...) pseudo-class in any way. This prevents the use of:

:host(:has(.el)) {
   /* ... */
}

Which would select the :host when there is an element with a classname of el in the light DOM tree of the :host.

And, it prevents the use of:

:host:has(.el) {
   /* ... */
}

Which would select the :host when there is an element with a classname of el in the shadow DOM tree of the :host.

Building off of the proposal to include this selector in previous interop calendars, it is time to support browsers in bringing this selector to life.

Specification

https://drafts.csswg.org/css-scoping/?utm_source=recordnotfound.com#host-selector

Additional Signals

WPTs
Chrome bug