如何利用Shadow DOM样式表基于子节点选择器控制自定义元素提示显示

核心结论 #

目前无法仅用纯CSS实现基于自定义元素Light DOM子节点状态控制Shadow DOM内部元素显示的需求，根源在于CSS选择器的跨DOM树限制。

为什么你的选择器无效 #

你尝试的:host(:has(::slotted(button:not([hidden]))))这类写法不生效，核心原因有两点：

1. Shadow DOM与Light DOM的隔离性：::slotted()仅用于给插槽内的Light DOM元素应用样式，不能作为:has()的条件参数。:has()在Shadow DOM内部使用时，只能查询Shadow DOM树内的元素，无法穿透到Light DOM。
2. :host()的:has()限制：:host(:has(...))中的选择器逻辑仅针对宿主元素自身的Shadow DOM后代，无法引用Light DOM中的子元素。Light DOM的<button>不属于Shadow DOM的树结构，所以无法被:has()检测到。

替代实现方案（JavaScript） #

最可靠的方式是通过JavaScript监听Light DOM中按钮的状态变化，动态给宿主元素添加/移除标记类，再通过CSS控制提示元素的显示：

1. 自定义元素逻辑 #

class CustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 构建Shadow DOM内容
    this.shadowRoot.innerHTML = `
      <span class="prompt">Use one of the following button(s)</span>
      <slot></slot>
    `;

    // 监听子元素的属性变化与结构变化
    this.mutationObserver = new MutationObserver(() => {
      this.syncPromptVisibility();
    });
    this.mutationObserver.observe(this, {
      attributes: true,
      childList: true,
      subtree: true,
      attributeFilter: ['hidden']
    });

    // 初始化检查
    this.syncPromptVisibility();
  }

  syncPromptVisibility() {
    // 判断是否存在未隐藏的按钮
    const hasVisibleButton = Array.from(this.querySelectorAll('button'))
      .some(btn => !btn.hasAttribute('hidden'));
    // 给宿主元素添加/移除类
    this.classList.toggle('has-visible-buttons', hasVisibleButton);
  }

  disconnectedCallback() {
    // 销毁观察者，避免内存泄漏
    this.mutationObserver.disconnect();
  }
}

customElements.define('custom-element', CustomElement);

2. 关联的CSS样式 #

/* 默认隐藏提示 */
.prompt {
  display: none;
}

/* 当宿主存在可见按钮时显示提示 */
:host(.has-visible-buttons) .prompt {
  display: revert;
}

关于ResizeObserver替代方案的说明 #

你提到用ResizeObserver监听元素边界框变化的方案，虽然可行，但存在局限性：如果按钮隐藏时并未改变自定义元素的尺寸（比如按钮原本就处于不可见状态），ResizeObserver无法触发回调，导致状态判断不准确。相比之下，直接监听hidden属性的变化更可靠。

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