多::slotted元素的CSS组合器问询：纯CSS关联样式可行吗？

这个问题确实挺棘手的——因为你想在shadow DOM的样式里跨插槽关联light DOM里的兄弟元素，但目前的CSS规范和浏览器实现都不支持你尝试的::slotted(input:disabled) ~ ::slotted(label)这种写法。让我给你拆解原因，再提供一个完美符合你需求的纯CSS解决方案：

为什么你的原始写法无效？ #

::slotted()选择器的工作方式有个关键限制：它只能匹配直接插入到插槽中的元素，而且组合器（比如~或+）不能在多个::slotted()之间使用。在你的shadow DOM结构里，<slot name="inputel">和<slot name="inputlabel">是两个独立的元素，它们各自承载light DOM里的input和label。你尝试的写法试图关联两个插槽内的元素，但CSS不允许跨::slotted()使用组合器——每个::slotted()的上下文都是单独的插槽内容，无法感知light DOM里原始的兄弟关系。

纯CSS解决方案：利用light DOM的原生兄弟关系 #

既然你不想把input/label放进shadow DOM，那我们可以直接在外部CSS（shadow DOM之外的样式）里，利用light DOM中input和label的原生兄弟关系来写样式。因为light DOM里的元素是可以被外部CSS选择器定位的，只要加上自定义元素的选择器作为前缀即可。

针对你的示例，写这样的外部样式即可：

/* 匹配紧邻的兄弟元素 */
my-element input:disabled + label[slot="inputlabel"] {
  cursor: not-allowed;
  color: red;
}

/* 如果input和label之间有其他元素，用通用兄弟选择器 */
my-element input:disabled ~ label[slot="inputlabel"] {
  cursor: not-allowed;
  color: red;
}

完整可运行示例 #

把上述样式和你的自定义元素结合起来，完整代码如下：

<style>
  my-element input:disabled + label[slot="inputlabel"] {
    cursor: not-allowed;
    color: red;
  }
</style>

<script>
customElements.define('my-element', class extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
        /* 这里可以保留插槽的基础样式，比如间距、布局等 */
        ::slotted(*) {
          margin: 0 8px;
        }
      </style>
      <slot name="inputel"></slot>
      <slot name="inputlabel"></slot>`;
  }
});
</script>

<my-element>
  <input disabled id="input1" type="text" slot="inputel"/>
  <label for="input1" slot="inputlabel">Disabled Label (red, not-allowed cursor)</label>
</my-element>

<my-element>
  <input id="input2" type="text" slot="inputel"/>
  <label for="input2" slot="inputlabel">Enabled Label (normal style)</label>
</my-element>

方案优势 #

这个写法完全满足你的所有要求：

• 不用把input/label放进shadow DOM，避免了复现原生表单元素行为的麻烦
• 纯CSS实现，不需要任何JavaScript逻辑
• 直接利用light DOM的原生结构，符合Web Components的设计思路

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