Componentes da Web em vez de reagir - outra tentativa

• DOM é um estado. Como não temos uma estrutura, esquecemos imediatamente o funcionalismo e retornamos ao OOP imperativo. Os componentes da Web são nós DOM de longa duração que encapsulam seu estado e têm uma API pública. Eles não são recriados, mas alterados. Portanto, devemos considerar o DOM não apenas como uma representação, mas como um repositório de objetos de negócios e, portanto, precisamos construir uma hierarquia de componentes levando em consideração a conveniência de sua interação.
• A interação dos componentes. Os componentes podem interagir por meio de chamadas diretas, trocas de retorno de chamada ou eventos de DOM do usuário ativo / inativo. O último método é o mais preferível, pois reduz o envolvimento mútuo (acoplamento) e ordena o gráfico de títulos (veja o exemplo abaixo).
  Os eventos DOM funcionam apenas dentro da hierarquia - eles podem aparecer de baixo para cima na cadeia de ancestrais ou transmitir para todos os descendentes. Em outros casos, a API padrão do navegador é usada para endereçar o componente: document.querySelector ('page-home'), e alguns componentes podem se registrar na janela e ser usados ​​globalmente: APP.route ('page-login').
• Estilos internos. O Shadow DOM não é usado; portanto, os componentes herdam os estilos globais, mas também podem ter os seus. Como é improvável que o <estilo com escopo> seja implementado em um futuro próximo, é necessário usar o prefixo do nome do componente para declarar o estilo interno; no entanto, este é lacônico e funciona bem (veja o exemplo abaixo).
• HTML/DOM. DOM — , HTML (value, checked, innerHTML contenteditable=«true» ..). JS , — / , ( ). , , this.pass — , <input> . , DOM, , , , .
• Navegação. Os componentes da página residem no contêiner <main> e, uma vez criados, não são excluídos, mas simplesmente ocultos. Isso permite implementar a navegação usando location.hash e os botões padrão do navegador para frente e para trás funcionam corretamente. Ao navegar para um componente existente, o método onRoute () é chamado, onde você pode atualizar os dados.

Estrutura de aplicação

• o componente raiz <app-app>, acessível via window.APP, contendo um roteador de páginas e funcionalidade global;
• painéis com botões contextuais (não os coloquei em um componente separado, mas os fiz parte do layout <app-app> para simplificar a manipulação de eventos);
• menu suspenso (componente separado);
• o contêiner <main> no qual os componentes da página serão adicionados: <page-home>, <page-login>, <page-work> conforme eles se abrem.

• O status da autorização e o nome de usuário atual são armazenados no componente <app-app>, mas vêm do componente <page-login> por meio de um evento pop-up.
• Um timer marca no componente <app-app>, que envia o valor atual para baixo por meio de um evento de transmissão que é interceptado apenas no descendente de <page-work>.

Implementação

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)

Objeções e sugestões