如何将“:host”（或“:host()”）与“:has()”一起使用

Question

有人知道如何将

:host

（或

:host()

）与

:has()

一起使用吗？

例如这样的事情：

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

或

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

使用我示例中的语法，不应用

opacity

。

Answer 1

在CSS中，如果你想选择伪类的子类

:host

。您可以在两个伪类之间放置一个空格，例如

:host :has([disabled])

。它将选择一个作为

:host

的子元素并且具有

disabled

状态的元素。

Answer 2

您可以使用

::slotted

但需要注意的是它只选择您的自定义元素的直接子元素，即不是孙子元素及其他元素。

::slotted([disabled]) {
}