Web 组件中的插槽选择器限制

Question

slot 很适合制作可重用的 Web 组件，但是，它目前有一个限制。我遇到的是样式问题。你无法在组件内部定义样式，即使你知道注入内容的结构是什么。

在 github here

中从我的 post 中找到的详细信息

我写了一个组件，并尝试从外部通过slot注入内容，并尝试为组件的影子根中的特定内容添加样式。 Demo

HTML 文件

  <my-navbar>
    <ul>
      <li>link1</li>
      <li>link2</li>
      <li>link3</li>
      </ul>
  </my-navbar>

JS文件

customElements.define('my-navbar', class extends HTMLElement {
  constructor () {
    super();
    const sr = this.attachShadow({ mode: 'open' });
    sr.innerHTML = `
      <style>
      /*worked*/
      ::slotted(ul)
      {
        color:green;
      }
      /*
      Suppose I know the outside content is "ul li", and I directly define the 
      style after they injected into component's slot. However, it just doesn't 
      work because the slotted selector is just a compound selector. It can only 
      affect the first layer 'ul'. It can't affect the child dom 'li' */
      ::slotted(ul li)
      {
        color:red;
      }
      </style>
      <slot></slot>
    `;
  }
});

但是，它不能直接工作，因为你不能为 ::slot(simple_selector) 使用复杂的选择器 Reason

我找到了一个间接的解决方案，那就是将外部内容重新附加到组件影子根内的槽中。 Demo

HTML 文件

  <my-navbar>
    <!--a dom defined a slot property-->
    <ul slot='t'>
      <li>link1</li>
      <li>link2</li>
      <li>link3</li>
      </ul>
    <!--A dom not define slot property-->
    <span>1234</span>
  </my-navbar>

JS文件

customElements.define('my-navbar', class extends HTMLElement {
  constructor () {
    super();
    const sr = this.attachShadow({ mode: 'open' });
    sr.innerHTML = `
      <style>
      ul li
      {
        color:red;
      }
      </style>
      <slot name='t'></slot>
      <slot ></slot>
    `;
    // Do something later...
    setTimeout(this.appendOutsideSlotContentIntoInsideSlot.bind(this), 1000)
  }

    appendOutsideSlotContentIntoInsideSlot()
  {

    // Insert outside dom element which has define slot property into the specify slot inside the shadow root
    debugger;
     for (let objIndex=0;objIndex<this.children.length;) 
     {
        var obj=this.children[objIndex];
        if(obj.slot){
          var slot=this.shadowRoot.querySelector('slot[name='+obj.slot+']');
          if(slot)
          {
              slot.appendChild(obj);
              continue;
           }
       }
       objIndex++;
    }


    // Insert the rest dom which has not define slot property values into the anonymous slot
    var defaultSlot=Array.prototype.slice.call(this.shadowRoot.querySelectorAll('slot')).filter(function(el){ return !el.name})[0];

    debugger;
    if(defaultSlot)
      {
         while (this.children.length>0) 
        {
          defaultSlot.appendChild(this.children[0])

        }

      }
  }
});

好吧，它适用于定义了插槽属性的内容，但不适用于没有插槽属性的内容。

Answer 1

除了一些可继承的规则外，插槽的内容不应直接受到组件阴影的影响 CSS。它们旨在让组件外部的 CSS 处于控制之中。

这是设计使然。

这类似于对阴影内元素的保护 DOM 不受外部影响 CSS。

阅读此处的样式化分布式节点部分：https://developers.google.com/web/fundamentals/web-components/shadowdom#stylinglightdom

您只能更改广告位内顶级元素的 CSS 规则。你甚至可以做些什么。所有子元素都由阴影DOM.

外的CSS控制

在下面的示例中，您将看到我们可以更改顶级元素或 <ul> 标签的颜色和背景颜色：

customElements.define('my-navbar', class extends HTMLElement {
  constructor () {
    super();
    const sr = this.attachShadow({ mode: 'open' });
    sr.innerHTML = `
      <style>
      ::slotted(ul)
      {
        color: blue;
      }
      
      ::slotted(.bold) {
        font-weight: bold;
        background-color: #222;
        color: #FFF;
      }
      
      ::slotted(.italic) {
        font-style: italic;
        background-color: #AAA;
        color: #000;
      }

      ::slotted(*)
      {
        color: red;
      }
      </style>
      <slot></slot>
    `;
  }
});

<my-navbar>
  <ul class="bold">
    <li>link1</li>
    <li class="italic">link2</li>
    <li>link3</li>
  </ul>
  <ul class="italic">
    <li>link1</li>
    <li class="bold">link2</li>
    <li>link3</li>
  </ul>
</my-navbar>

在上面的例子中，文本是红色而不是蓝色的唯一原因是因为 ::slotted(*) 只影响两个 <ul>，与 ::slotted(ul) 具有相同的特异性并且被放置在 ::slotted(ul) 之后。颜色由 <li> 标签继承，因为那是 CSS 的工作方式。

背景颜色仅影响基于类的 <ul> 标签，而不影响具有相同类.

的 <li> 标签

在下面的示例中，<li> 颜色和 background-color 由阴影 DOM 外部的 CSS 控制。外部规则的行为就好像它们比阴影 DOM 规则更具体，即使阴影 DOM 规则同时包含 tag 和 class 选择器（ul.bold).

同样，这是设计使然。

customElements.define('my-navbar', class extends HTMLElement {
  constructor () {
    super();
    const sr = this.attachShadow({ mode: 'open' });
    sr.innerHTML = `
      <style>
      ::slotted(ul)
      {
        color: blue;
      }
      
      ::slotted(ul.bold) {
        font-weight: bold;
        background-color: #222;
        color: #FFF;
      }
      
      ::slotted(ul.italic) {
        font-style: italic;
        background-color: #AAA;
        color: #000;
      }

      ::slotted(*)
      {
        color: red;
      }
      </style>
      <slot></slot>
    `;
  }
});

li {
  color: #555;
  backgroung-color: #ddd;
}

.bold {
  font-weight: bold;
  background-color: #FF0;
}

.italic {
  font-style: italic;
  background-color: #0FF;
}

<my-navbar>
  <ul class="bold">
    <li>link1</li>
    <li class="italic">link2</li>
    <li>link3</li>
  </ul>
  <ul class="italic">
    <li>link1</li>
    <li class="bold">link2</li>
    <li>link3</li>
  </ul>
</my-navbar>

您会注意到 <ul> 和 <li> 标签的背景颜色是根据 bold 和 italic 的外部类设置的。

如果您想使用 <slot>，您同意使用您的组件的开发人员对放置在插槽中的任何内容具有覆盖权。

如果您不希望用户拥有那种控制权，那么防止它的唯一方法是将组件的子级移动到组件的阴影中 DOM。

但是做的时候要小心。

根据 Web Component constructors 的规则，您不能在构造函数中访问或更改组件的子项。

但您必须记住，每次将组件插入 DOM 时，connectedCallback 都会被调用 。因此，如果开发人员删除然后 re-appends 您的组件，那么 connectedCallback 将再次被调用。所以你必须添加一个门来防止它被调用两次。

您可能还想添加一个 MutationObserver 以查看用户何时更改您的组件的子项。

Web 组件中的插槽选择器限制

slot selector limit in web component

web-component

shadow-dom

native-web-component