Веб-компоненты вложенных слотов

Question

Есть ли лучший способ передать слоты глубоко вложенным компонентам?

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>

Answer 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>