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

发布于09月15日

我有一个Web组件，它应该接受任意元素来包装其内容.虽然我可以在Chrome Dev工具中看到插槽分配正确，但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个

推荐答案

你不能有嵌套的<slot>个元素kinda，就像你不能有嵌套的<li>个元素一样.

So like with <li> where you add an extra <ul> container,
you have to add an extra Web Component which passes on slot content:

<script>
class MyCoolBaseClass extends HTMLElement {
  constructor(html) {
    super().attachShadow({mode:'open'}).innerHTML = html;
  }
}
customElements.define('el-one', class extends MyCoolBaseClass {
  constructor() {
    super(`<el-two><slot   name="ONE" slot="TWO"   ></slot></el-two>`);
  }
});
</script>

<el-one>
  <b slot="ONE">Fantastic!</b>
</el-one>

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