多个：：时隙元素的组合器

Question

我感兴趣的是，是否有一种方法可以实现如下所示：

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

通过在一些示例上进行测试，它不起作用。

Specification没有描述这是否可能。MDN也没有涵盖这种情况。

我不想将input和label都包含在shadow-dom中，因为我不想处理和/或复制这些元素的本机行为。

附注:我知道我可以用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

完整的详细说明请访问：::slotted CSS selector for nested children in shadowDOM slot

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

ShadowDOM插槽关闭指示灯

input和label在lightDOM中，

当反射时，保持不可见的在那里(不移动！)to shadowDOM SLOTs

因此，您必须在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">来创建上面的超文本标记语言，然后在它的shadowDOM中禁用CSS (不需要插槽)

或(伪代码)

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

...
connectedCallback(){
  let inp=this.shadowRoot.querySelector("input");
  inp.type = this.getAttribute("type");
  inp.toggleAttribute( "disabled" , this.hasAttribute("disabled"));
}


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

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

::slotted是在它的前身在V0中造成性能问题后加入WebComponents V1规范的

因此，它只接受简单的选择器作为参数，并且只能样式化插槽中的第一级元素

所以在上面的例子中，::slotted可以样式化<span slot="label">，但不能样式化里面的<b>。

注意： SLOTs是实时连接，您可以在任何时候重新应用CSS，并且内容更改会立即 to shadowDOM：

document.querySelector("input-element > b").innerHTML="Better Label!";

更多与插槽相关的答案可以通过StackOverflow搜索找到：Custom Elements SLOTs