pages/components/page.js

export class Page extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({mode: 'open'})
    this.textArea = document.createElement('textarea')
    this.header = document.createElement('h1')
    this.textArea.addEventListener('input', e => {
      const path = this.getAttribute('path')
      localStorage.setItem(
        path,
        e.target.value
      )
    })
    const div = document.createElement('div')
    div.appendChild(this.header)
    div.appendChild(this.textArea)
    shadow.appendChild(div)
  }

  connectedCallback() {
    const path = this.getAttribute('path')
    this.header.innerText = path
    this.textArea.value = localStorage.getItem(
      path
    ) ?? ''
    const style = document.createElement('style')
    style.textContent = `
      textarea {
        width: 80%;
        height: 45vh;
      }
    `
    this.shadowRoot.append(style)
  }
}