使用HTML Web组件而不使用Shadow DOM时，插槽无法正常工作。

Question

我有一个不带 Shadow DOM 的 HTML Web 组件，我尝试添加一个 Slot，但由于某些原因它不起作用。

我期望它能将 "Foo bar" 替换为 "Hello world"，但实际上没有发生。

1. Slot 只在使用 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>

- Jens Törnell

Answer 1

是的，<slot> 只能在原生（JSWC）Web组件的shadowDOM中工作

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

插槽内容是反射的lightDOM内容

参见：::在shadowDOM插槽中选择嵌套子元素的CSS选择器

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

- Danny '365CSI' Engelman