Html ：host:defined不'；t工作，：主机（：已定义）工作

在CSS中将and与伪类结合使用时，是否不可能或不允许在CSS中组合and

正如您在下面的示例中所看到的，以下

:host:defined { display: block; }

不起作用，而

:host(:defined) { display: block; }

工作

class CustomElement扩展了HtmleElement{
构造函数（）{
超级（）；
this.shadow=this.attachShadow（{mode:'closed'}）；
常量css=`
：主机{显示：无；}
：host:defined{display:block；}
`;
this.styles=document.createElement（'style'）；
this.styles.innerHTML=css；
}
connectedCallback（）{
const div=document.createElement（'div'）；
div.innerHTML=`
${this.tagName.toLowerCase（）}
已连接！`；
this.shadow.appendChild（this.styles）；
this.shadow.appendChild（div）；
}
}
类OtherCustomElement扩展HtmleElement{
构造函数（）{
超级（）；
this.shadow=this.attachShadow（{mode:'closed'}）；
常量css=`
：主机{显示：无；}
：host（：defined）{display:block；}
`;
this.styles=document.createElement（'style'）；
this.styles.innerHTML=css；
}
connectedCallback（）{
const div=document.createElement（'div'）；
div.innerHTML=`
${this.tagName.toLowerCase（）}
已连接！`；
this.shadow.appendChild（this.styles）；
this.shadow.appendChild（div）；
}
}
自定义元素。定义（'custom-element'，CustomElement）；
自定义元素。定义（'other-custom-element'，OtherCustomElement）

从中我们可以看到：

：host
伪类在阴影树的上下文中求值时，与阴影树的阴影主机相匹配。在任何其他上下文中，它都不匹配

：host（）
函数伪类的语法为：
：host（）
在阴影树的上下文中求值时，如果阴影主机在其正常上下文中与选择器参数匹配，则它与阴影树的阴影主机匹配。在任何其他上下文中，它都不匹配

基本上，
：host
将与影子主机匹配，仅此而已。当第二种语法允许您在
（）
中添加选择器时，您不能将其与任何其他选择器组合

如果您参考规范中所示的示例：

假设您有一个具有阴影树的组件，如下所示：


:host:defined
有效吗？@Mordred这毫无意义，因为与
:defined
匹配的是
:host
。
<x-foo class="foo">
  <"shadow tree">
    <div class="foo">...</div>
  </>
</x-foo>