多个::槽元素的组合符

Question

我很感兴趣是否有办法实现以下目标：

::slotted(input[type="checkbox"]:disabled) ~ ::slotted(label) {
  cursor: not-allowed;
}

通过在某些示例上进行测试，它不起作用。Specification没有描述是否应该这样做。 MDN也不涵盖这种情况。

我不想将input或label都封装在shadow-dom内，因为我不想处理和/或复制那些元素的本机行为。

P.S。我知道我可以使用javascript来做到这一点（例如，通过将类添加到插槽label中），但是我正在寻找一种简单的CSS解决方案。

完整示例：

<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `
            <style>
              ::slotted(input:disabled) ~ ::slotted(label) {
                color: red;
              }
              ::slotted(input:disabled) + ::slotted(label) {
                color: red;
              }
            </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">label</label>
</my-element>

Answer 1

<my-element>
  <input disabled id="input1" type="text" slot="inputel"/>
  <label for="input1" slot="inputlabel">label</label>
</my-element>

input和label位于lightDOM中，并在已反射（未移动！）到shadowDOM

时保留在此处

所以您必须在lightDOM：

中设置样式。

    <style>
      /* style lightDOM!! */
      my-element input:disabled ~ label {
        color: red;
      }
    </style>

<template id="MY-ELEMENT">
  <style>
    ::slotted(input:disabled){
      border:1px dashed red;
    }
  </style>
INPUT <slot name="inputElement"></slot> <slot name="inputLabel"></slot>
</template>
<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super().attachShadow({mode: 'open'})
             .append(document.getElementById(this.nodeName).content.cloneNode(true));
      }
  });
</script>
<style>
  /* style lightDOM!! */
  my-element input:disabled ~ label {
    color: red;
    font-weight: bold;
  }
</style>
<my-element>
  <input disabled id="inp1" placeholder="This is disabled" type="text" slot="inputElement"/>
  <label for="inp1" slot="inputLabel">input label 1</label>
</my-element>
<br>
<my-element>
  <input id="inp2" placeholder="Not disabled" type="text" slot="inputElement"/>
  <label for="inp2" slot="inputLabel">input label 2</label>
</my-element>

此用例有点人为设计，my-element没有任何帮助，用户仍然必须声明input和label

也许创建一个<input-element type="text" label="A Label">以便在HTML之上创建，然后在它的shadowDOM中具有禁用的CSS（不需要SLOT）

或

<template id="INPUT-ELEMENT">
  <style>
    input:disabled~label{
      color:red;
    }
  </style>
  <input id="i" type="text"/>
  <label for="i"><slot name="label"></slot></label>
</template>

<input-element type="text">
  <span slot="label"><b>Fancy Label<b></slot>
</input-element>

如果您想给用户更多控制权

---

:: slotted在其前身引起V0性能问题后成为WebComponents V1规范因此，它仅将简单的选择器作为参数，并且只能在广告位中设置第一级元素的样式

因此在以上示例中，::slotted可以设置<span>的样式，但不能设置内部的<b>的样式。

相关的答案：WCSLOT

---