能否将:host()与:has()结合使用？相关规范咨询

首先明确：:host(:has(...))这种嵌套用法目前既不属于标准规范，也没有主流浏览器实现，更不存在MDN、caniuse这类官方文档支持，完全不能用于生产环境。

核心原因 #

Shadow DOM的样式隔离机制决定了：

• :host伪类仅用于选择Web组件的宿主元素，其参数只能描述宿主自身的状态（比如类名、属性、伪类状态），无法通过嵌套:has()来关联Light DOM内部的后代元素。
• 即使是:has()选择器本身，也无法跨Shadow DOM边界感知Light DOM的内容——Shadow DOM内部的样式默认无法访问Light DOM的元素，反之亦然，唯一的例外是::slotted()，但它只能选中插槽的直接子元素，无法遍历后代。

可行替代方案 #

针对你的需求，兼容性最好的方案是通过JavaScript监听Light DOM的变化，动态给宿主元素添加/移除类名，再在Shadow DOM中通过:host(.xxx)来控制样式：

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host(.has-target-div) .shadow-content {
          background-color: #ff4444;
          padding: 8px;
        }
      </style>
      <div class="shadow-content">Shadow DOM 内容</div>
      <slot></slot>
    `;
    // 监听Light DOM的变化
    this.mutationObserver = new MutationObserver(() => this.syncHostClass());
  }

  connectedCallback() {
    this.syncHostClass();
    this.mutationObserver.observe(this, {
      childList: true,
      subtree: true,
      attributes: false
    });
  }

  disconnectedCallback() {
    this.mutationObserver.disconnect();
  }

  syncHostClass() {
    // 检测Light DOM中是否存在目标div
    const hasTargetDiv = this.querySelector('div') !== null;
    this.classList.toggle('has-target-div', hasTargetDiv);
  }
}

customElements.define('my-component', MyComponent);

这个方案支持包括Safari在内的所有主流浏览器，完全不受可构造样式表的限制，也能应对复杂场景的动态变化。

如果仅考虑支持可构造样式表的浏览器，也可以动态创建样式表并注入Shadow DOM，但由于Safari的兼容性问题，不推荐作为首选方案。

权威规范参考 #

目前W3C的CSS Scoping Module（Shadow DOM样式相关的核心规范）中，仅定义了:host、:host()、:host-context()的基础用法，从未提及:host(:has(...))这种嵌套形式，因此该用法没有任何官方标准依据。

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