Slots 不适用于没有 shadow dom 的 html Web 组件

【问题标题】：Slots does not work on a html web component without shadow domSlots 不适用于没有 shadow dom 的 html Web 组件
【发布时间】：2021-04-30 10:49:03
【问题描述】：

我有一个没有 shadow dom 的 html web 组件，我尝试添加一个插槽。由于某种原因，它不起作用。

我预计它会将“Foo bar”切换为“Hello world”，但没有发生。

插槽是否仅适用于 shadow dom 和模板？
我怎样才能让它工作？

class HelloWorld extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <div>
        <slot name="element-name">Foo Bar</slot>
      </div>
    `;
  }
}

customElements.define("hello-world", HelloWorld);

<hello-world>
  <span slot="element-name">Hello World</span>
</hello-world>

【问题讨论】：

标签： javascript components slots native-web-component

【解决方案1】：

是的，<slot> 仅适用于 shadowDOM

插槽内容是反射 lightDOM内容

见：::slotted CSS selector for nested children in shadowDOM slot

没有 shadowDOM 的 Web 组件只有 innerHTML

如果您在这样的 Web 组件上使用this.innerHTML=，它会替换innerHTML，就像在任何其他 HTML 标记上一样

使用 shadowDOM：

<hello-world>
  <b slot="none">Mighty</b>
  <span slot="title">Web Components</span>
  Hello! 
</hello-world>

<script>
customElements.define("hello-world", class extends HTMLElement {
  constructor() {
    super()
      .attachShadow({mode:"open"})
      .innerHTML = `<div><slot></slot><slot name="title">Foo Bar</slot></div>`;
    this.onclick = (evt) => {
        this.querySelector('b').slot="title";
    };
  }
});
</script>

【讨论】：