Componentes web en lugar de reaccionar: otro intento

• DOM es un estado. Como no tenemos un marco, nos olvidamos inmediatamente del funcionalismo y volvemos al imperativo OOP. Los componentes web son nodos DOM de larga duración que encapsulan su estado y tienen una API pública. No se recrean, sino que se cambian. Esto significa que deberíamos considerar el DOM no solo como una representación, sino como un repositorio de objetos comerciales, y por lo tanto, necesitamos construir una jerarquía de componentes teniendo en cuenta la conveniencia de su interacción.
• La interacción de los componentes. Los componentes pueden interactuar a través de llamadas directas, intercambios de devolución de llamada o mediante eventos DOM de usuario arriba / abajo. El último método es el más preferible, ya que reduce el compromiso mutuo (acoplamiento) y ordena el gráfico de enlaces (ver ejemplo a continuación).
  Los eventos DOM solo funcionan dentro de la jerarquía: pueden aparecer de abajo hacia arriba en la cadena de antepasados ​​o transmitirse a todos los descendientes. En otros casos, la API estándar del navegador se usa para abordar el componente: document.querySelector ('page-home'), y algunos componentes pueden registrarse en la ventana y usarse globalmente: APP.route ('page-login').
• Estilos interiores Shadow DOM no se utiliza, por lo tanto, los componentes heredan estilos globales, pero también pueden tener los suyos. Dado que es poco probable que <style scoped> se implemente en un futuro cercano, debe usar el prefijo del nombre del componente para declarar el estilo interno, sin embargo, esto es lacónico y funciona bien (vea el ejemplo a continuación).
• HTML/DOM. DOM — , HTML (value, checked, innerHTML contenteditable=«true» ..). JS , — / , ( ). , , this.pass — , <input> . , DOM, , , , .
• Navegación. Los componentes de la página viven dentro del contenedor <main>, y una vez creados, no se eliminan, sino que simplemente se ocultan. Esto le permite implementar la navegación usando location.hash, y los botones estándar del navegador funcionan correctamente. Al navegar a un componente existente, se llama al método onRoute (), donde puede actualizar los datos.

Estructura de la aplicación

• el componente raíz <app-app>, accesible a través de window.APP, que contiene un enrutador de página y funcionalidad global;
• paneles con botones contextuales (no los puse en un componente separado, sino que los hice parte del diseño <app-app> para simplificar el manejo de eventos);
• menú desplegable (componente separado);
• el contenedor <main> en el que se agregarán los componentes de la página: <page-home>, <page-login>, <page-work> cuando se abren.

• El estado de autorización y el nombre de usuario actual se almacenan en el componente <app-app>, pero provienen del componente <page-login> a través de un evento emergente.
• Un temporizador marca el componente <app-app>, que envía el valor actual hacia abajo a través de un evento de difusión que se captura solo en el descendiente de <page-work>.

Implementación

import wcmixin from './WcMixin.js'

const me = 'page-login'
customElements.define(me, class extends HTMLElement {
   _but = null

   connectedCallback() {
      this.innerHTML = `
         <style scoped>
            ${me} {
               height: 90%; width: 100%;
               display: flex; flex-direction: column;
               justify-content: center; align-items: center;
            }
            ${me} input { width: 60%; }
         </style>
         <input w-id='userInp/user' placeholder='user'/> 
         <input w-id='passInp/pass' type='password' placeholder='password'/>
      `
      wcmixin(this)

      this.userInp.oninput = (ev) => {
         this.bubbleEvent('login-change', {logged: false, user: this.user})
      }

      this.passInp.onkeypress = (ev) => {
         if (ev.key === 'Enter') this.login()
      }
   }

   onRoute() {
      this.userInp.focus()
      this._but = document.createElement('button')
      this._but.innerHTML = 'Log in<br>⇒'
      this._but.onclick = () => this.login()
      this.bubbleEvent('set-buts', { custom: [this._but] })
   }

   async login() {
      APP.msg = 'Authorization...'
      this._but.disabled = true
      setTimeout(() => {
         this._but.disabled = false
         if (this.user) {
            this.bubbleEvent('login-change', {logged: true, user: this.user})
            APP.route('page-work')
         } else {
            APP.msg = 'Empty user !'
            this.userInp.focus()
         }
      }, 1500)
   }
})

import wcmixin from './WcMixin.js'

const me = 'page-work'
customElements.define(me, class extends HTMLElement {

   connectedCallback() {
      this.innerHTML = `
         <p w-id='/msg'>Enter text:</p>
         <p w-id='textDiv/text' contenteditable='true'>1)<br>2)<br>3)</p>
      `
      wcmixin(this)

      this.addEventListener('notify-timer', (ev) => {
         this.msg = `Enter text (elapsed ${ev.val}s):`
      })
   }

   async onRoute() {
      this.textDiv.focus()
      document.execCommand('selectAll',false,null)
      const but = document.createElement('button')
      but.innerHTML = 'Done<br>⇒'
      but.onclick = () => alert(this.text)
      this.bubbleEvent('set-buts', { custom: [but] })
   }
})

setInterval(() => {
   this._elapsed += 1
   this.drownEvent('notify-timer', this._elapsed)
}, 1000)

Objeciones y sugerencias.