插槽无法在没有 Shadow dom 的 html Web 组件上工作

Question

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

我希望它将“Foo bar”切换为“Hello world”，但这并没有发生。

1. 插槽只能与 Shadow dom 和模板一起使用吗？
2. 我怎样才能让它工作？

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>

Answer 1

是的，

<slot>

仅适用于本机（JSWC）Web组件中的shadowDOM内部

或原生HTML元素（您可以附加shadowDOM）

开槽内容反射lightDOM内容

参见： ::shadowDOM 插槽中嵌套子级的开槽 CSS 选择器

Web 组件没有shadowDOM 仅具有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 = `<slot></slot><slot name="title">Foo Bar</slot>`;
    this.onclick = (evt) => this.querySelector('b').slot = "title";
  }
});
</script>