Web 组件中嵌套插槽的内容不可见

Question

我有一个应该接受任意元素来包装其内容的 Web 组件。虽然我可以在 Chrome 开发工具中看到插槽已正确分配，但 DOM 中没有任何内容。以前有人见过这个问题吗？

定义

class ExampleParent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `
      <slot name="as">
        <slot name="prefix"></slot>
        <slot></slot>
      </slot>
    `;
  }
}
customElements.define('example-parent', ExampleParent);

调用

<example-parent
  style="
    min-width: 100px;
    height: 40px;
    border: 1px solid red;
    display: inline-block;
  "
>
  <button slot="as"></button>
  <div slot="prefix">Prefix slot</div>
  Default
</example-parent>

实际结果

预期结果

源代码

https://stackblitz.com/edit/nested-slots-ahtfyf?file=index.html

Answer 1

我可以看到您要执行的操作，即您希望影子 DOM 包含

<button>
  <div>Prefix</div>
  Default
</button>

但不幸的是，这是不可能通过<slot> 元素实现的。

Per the HTML spec

槽元素表示其分配的节点（如果有），否则表示其内容。

这意味着整个<slot name="as"> 元素及其内容被<button slot="as"> 元素替换，<slot> 的内容被丢弃。

这样做的原因是浏览器无法知道如何将后代添加到提供的替换中，因为可能已经为插槽替换提供了 void 元素（例如<img>），或者深度嵌套的结构。

Answer 2

您不能嵌套 <slot> 元素有点就像你不能嵌套 <li> 元素一样。

就像<li> 一样，您可以在其中添加一个额外的<ul> 容器，
您必须添加一个额外的 Web 组件传下去插槽内容：

更新：添加了exportparts 和part 以显示如何全球的CSS 样式嵌套的shadowDOM

<script>
class MyCoolBaseClass extends HTMLElement {
  constructor(html) {
    let style = "<style>:host{display:inline-block;background:pink}</style>";
    super().attachShadow({mode:'open'}).innerHTML = style + html;
  }
}
customElements.define('el-one', class extends MyCoolBaseClass {
  constructor() {
    super(`<el-two exportparts="title"><slot   name="ONE" slot="TWO"   ></slot></el-two>`);
  }
});
</script>

<style>
  *::part(title){
    color:green;
  }
</style>
<el-one>
  <b slot="ONE">Fantastic!</b>
</el-one>

<script>
customElements.define('el-two', class extends MyCoolBaseClass {
  constructor() {
    super(`Hello <slot   name="TWO"   ></slot> <b part="title">Web Components</b>`);
  }
});
</script>