CODEWITHSUNDEEP
web-componentshadow-domcustom-elementnative-web-component
MartinP
MartinP

Reputation: 405

Web components nested slots

Is there a better way to pass slots to deeply nested components?

index.html

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

outer component:

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

inner component:

  <slot name=foo></slot>

Upvotes: 5

Views: 5531

Answers (1)

daKmoR
daKmoR

Reputation: 1864

That works just fine :)

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>

Upvotes: 14

Related Questions