如何结合使用:host（或:host()）与:has()伪类？

你的两种写法语法本身是正确的，样式不生效通常是以下两个原因导致：

• 浏览器支持性限制
  :has()选择器的兼容性不算特别广泛，且早期支持:has()的浏览器版本，可能未放开其在Shadow DOM环境中的使用权限。需要确保浏览器版本满足：Chrome 105+、Firefox 121+、Safari 15.4+，这些版本才完整支持Shadow DOM内的:has()查询。

• Shadow DOM结构不匹配
  :host:has([disabled])的作用是选中自身内部包含带disabled属性后代元素的宿主组件，你需要确认带[disabled]的元素确实是该组件Shadow DOM树中的直接或间接子元素。如果disabled元素在Shadow DOM外部，这个选择器无法捕获到目标。

举个可正常生效的组件示例：

<my-disabled-component>
  #shadow-root
    <button disabled>禁用按钮</button>
    <style>
      /* 两种写法均可生效 */
      :host:has([disabled]) {
        opacity: 0.75;
        display: inline-block; /* 确保宿主元素有明确的盒模型，避免样式不生效 */
      }
    </style>
</my-disabled-component>

如果排查后仍不生效，可以检查宿主元素的默认样式是否覆盖了opacity属性，比如是否有其他优先级更高的样式规则影响。

内容的提问来源于stack exchange，提问作者tapelago