Multiple Named Slots Usage

Outlines how to design a layout component with multiple named slots, such as header, footer, and main content areas.

<div class="layout-component">
  <slot name="header"></slot>
  <slot name="main"></slot>
  <slot name="footer"></slot>
</div>

HTML structure with multiple named slots for header, main content, and footer.

<style>
.layout-component {
  display: grid;
  grid-template-areas: 'header' 'main' 'footer';
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

::slotted([slot="header"]) {
  grid-area: header;
}

::slotted([slot="main"]) {
  grid-area: main;
}

::slotted([slot="footer"]) {
  grid-area: footer;
}
</style>

CSS styles to define grid layout for the component and assign slot elements to the grid areas.

<my-layout>
  <div slot="header">Header content</div>
  <div slot="main">Main content</div>
  <div slot="footer">Footer content</div>
</my-layout>

Example usage of the layout component, where elements are placed into the respective slots.

class LayoutComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        /* ... CSS styles here ... */
      </style>
      <slot name="header"></slot>
      <slot name="main"></slot>
      <slot name="footer"></slot>
    `;
  }
}
customElements.define('my-layout', LayoutComponent);

JavaScript to define a custom element 'my-layout' that incorporates the layout with slots