Slotted Layout Component

page-layout.mjs

export default function PageLaout ({ html, state }) {
  const { attrs = {} } = state
  const { mobileBreakpoint = '40rem', desktopBreakpoint = '60rem' } = attrs
  return html`
      <style>
    :host {
        min-height: 100vh;
        display: grid;
        grid-template-areas:
            'header'
            'left-sidebar'
            'main'
            'footer';
        grid-template-rows: min-content min-content 1fr min-content;
    }
    ::slotted([slot='header']) {
        grid-area: header;
    }
    ::slotted([slot='left-sidebar']) {
        grid-area: left-sidebar;
    }
    ::slotted([slot='main']) {
        grid-area: main;
    }
    ::slotted([slot='right-sidebar']) {
        grid-area: right-sidebar;
        display: none;
    }
    ::slotted([slot='footer']) {
        grid-area: footer;
    }
    @media (min-width: ${mobileBreakpoint}) {
        :host {
            grid-template:
            'header             header' min-content
            'left-sidebar       main  ' 1fr
            'footer             footer' min-content
            / minmax(auto, var(--layout-max-sidebar-width, 16rem)) minmax(var(--layout-min-content-width, 16rem), 1fr);
        }
    }
    @media (min-width: ${desktopBreakpoint}) {
        :host {
            grid-template:
            'header             header             header' min-content
            'left-sidebar       main               right-sidebar' 1fr
            'footer             footer             footer' min-content
            / minmax(auto, var(--layout-max-sidebar-width, 16rem)) minmax(var(--layout-min-content-width, 16rem), 1fr) minmax(auto, var(--layout-max-sidebar-width, 16rem));
        }
        ::slotted([slot='right-sidebar']) {
            grid-area: right-sidebar;
            display: block;
        }
    }
      </style>
  <slot name="header"></slot>
  <slot name="left-sidebar"></slot>
  <slot name="main"></slot>
  <slot name="right-sidebar"></slot>
  <slot name="footer"></slot>
  `
}

test-page.html

<page-layout mobileBreakpoint="40rem" desktopBreakpoint="60rem">
    <div slot="header" style="background-color: red">Header</div>
    <div slot="left-sidebar" style="background-color: orange">Left Sidebar</div>
    <div slot="main" style="background-color: green">Content</div>
    <div slot="right-sidebar" style="background-color: blue">Right Sidebar</div>
    <div slot="footer" style="background-color: purple">Footer</div>
</page-layout>