Web 组件嵌套插槽

【问题标题】：Web components nested slotsWeb 组件嵌套插槽
【发布时间】：2018-07-28 06:49:47
【问题描述】：

有没有更好的方法将槽传递给深度嵌套的组件？

index.html

  <outer-comp>
    <span slot=foo>Lorem ipsum</span>
  </outer-comp>

外部组件：

  <inner-comp>
    <slot name=foo slot=foo></slot>
  </inner-comp>

内部组件：

  <slot name=foo></slot>

【问题讨论】：

您总是可以通过属性或属性传递简单的数据。你能举一个更真实的例子来说明你在做什么，包括你想要在插槽中做什么的复杂性。
我想通过代理组件传递所有命名槽，为每个槽自动插入。

标签： web-component shadow-dom custom-element native-web-component

【解决方案1】：

效果很好:)

class ElOuter extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <p>- outer start</p>
      <el-inner>
        <slot name="heading" slot="header"></slot>
      </el-inner>
      <slot></slot>
      <p>- outer stop</p>
    `;
  }
}
customElements.define('el-outer', ElOuter);

class ElInner extends ElOuter {
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <p>-- inner start</p>
      <slot name="header"></slot>
      <p>-- inner stop</p>
    `;
  }
}
customElements.define('el-inner', ElInner);

<el-outer>
  <h2 slot="heading">hey</h2>
  <p>I will be in the default content</p>
</el-outer>

【讨论】：

是的，就是这样。我在考虑多个命名插槽，传递给内部组件，而不输入<slot slot=headline name=headline></slot>，但它没有用......