pages/components/layout.js

export class Layout extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
    this.header = document.createElement('m-header')
    this.editing = false
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        width: 100%;
        height: 100dvh;
        display: flex;
        flex-direction: column;
      }
      .m-page {
        flex-grow: 1;
      }
    `
    this.shadowRoot.appendChild(style)
    this.header.editing = this.editing
    this.header.addEventListener('click-edit', () => {
      this.editing = !this.editing
    })
    this.shadowRoot.appendChild(this.header)
    this.load()
    addEventListener('hashchange', () => {
      this.load()
    })
  }

  load() {
    const path = this.path
    const prevPage = this.page
    this.page = document.createElement('m-page')
    this.page.csp = this.csp
    this.page.path = path
    this.editing = this.editing
    if (prevPage !== undefined) {
      prevPage.remove()
    }
    this.shadowRoot.appendChild(this.page)
    this.header.path = path
  }

  get path() {
    return '/hello'
  }

  set editing(value) {
    this._editing = value
    this.header.editing = this.editing
    if (this.page) {
      this.page.editing = this.editing
    }
  }

  get editing() {
    return this._editing
  }
}