How to use ":host" (or ":host()") with ":has()"

Question

Does anybody know how to use :host (or :host()) with :has() ?

For example something like this:

:host:has([disabled]) {
  opacity: 0.75;
}

or

:host(:has([disabled])) {
  opacity: 0.75;
}

With the syntax from my example the opacity is not applied.

Inexorable

If disabled is an attribute on your Custom Element. It is :host([disabled]) – Pochard

This would select an "host" element having the attribute "disabled", like so <custom-element disabled />, not an "host" having children with the attribute "disabled". Hence the need of the :has() function – Inexorable

ah so. AFAIK not possible, In this sence shadowRoots are like IFRAMEs – Pochard

Answer 1

In CSS, if you want to select a child of the pseudo-class :host. You can put a space between the two pseudo-classes as such :host :has([disabled]). It will select an element that is the child of :host and will have the disabled state.

Bandaranaike

Answer 2

Can youse the ::slotted but the caveat is it only selects direct children of your custom elements, i.e. not grand children and further.

::slotted([disabled]) {
}

Swainson