Actualizar 'components/layout.js'

components/layout.js

@@ -2,19 +2,46 @@ export class Layout extends HTMLElement {
   constructor() {
     super()
     this.attachShadow({mode: 'open'})
+    this.header = document.createElement('m-header')
+    this.shadowRoot.appendChild(this.header)
     this.load()
     addEventListener('hashchange', () => {
       this.load()
     })
   }
 
+  connectedCallback() {
+    const style = document.createElement('style')
+    style.textContent = `
+      :host {
+        width: 100%;
+        height: 100dvh;
+        display: flex;
+        flex-direction: column;
+      }
+      .m-page {
+        flex-grow: 1;
+      }
+    `
+    document.appendChild(style)
+  }
+
   load() {
-    const el = document.createElement('m-page')
+    const path = this.path
-    const path = new URL(
+    const prevPage = this.page
+    this.page = document.createElement('m-page')
+    this.page.path = path
+    if (prevPage !== undefined) {
+      prevPage.remove()
+    }
+    this.shadowRoot.appendChild(this.page)
+    this.header.path = path
+  }
+
+  get path() {
+    return new URL(
       window.location.hash.slice(1) || '/',
       window.location
     ).pathname
-    el.setAttribute('path', path)
-    this.shadowRoot.replaceChildren(el)
   }
 }