Composants Web au lieu de réagir - une autre tentative

• DOM est un état. Comme nous n'avons pas de cadre, nous oublions immédiatement le fonctionnalisme et revenons à l'impératif POO. Les composants Web sont des nœuds DOM à longue durée de vie qui encapsulent leur état et disposent d'une API publique. Ils ne sont pas recréés, mais modifiés. Cela signifie que nous devons considérer le DOM non seulement comme une représentation, mais comme un référentiel d'objets métier, et donc nous devons construire une hiérarchie de composants en tenant compte de la commodité de leur interaction.
• L'interaction des composants. Les composants peuvent interagir via des appels directs, des échanges de rappel ou via des événements DOM utilisateur haut / bas. Cette dernière méthode est la plus préférable, car elle réduit l'engagement mutuel (couplage) et ordonne le graphique des liaisons (voir l'exemple ci-dessous).
  Les événements DOM ne fonctionnent que dans la hiérarchie - ils peuvent apparaître de bas en haut de la chaîne des ancêtres, ou être diffusés à tous les descendants. Dans d'autres cas, l'API de navigateur standard est utilisée pour adresser le composant: document.querySelector ('page-home'), et certains composants peuvent s'enregistrer dans la fenêtre et utilisés globalement: APP.route ('page-login').
• Styles intérieurs. Le DOM fantôme n'est pas utilisé, donc les composants héritent des styles globaux, mais peuvent aussi avoir les leurs. Étant donné qu'il est peu probable que <style scoped> soit implémenté dans un avenir proche, vous devez utiliser le préfixe du nom du composant pour déclarer le style interne, mais cela est laconique et fonctionne correctement (voir l'exemple ci-dessous).
• HTML/DOM. DOM — , HTML (value, checked, innerHTML contenteditable=«true» ..). JS , — / , ( ). , , this.pass — , <input> . , DOM, , , , .
• La navigation. Les composants de la page vivent à l'intérieur du conteneur <main>, et une fois créés, ils ne sont pas supprimés, mais simplement masqués. Cela vous permet d'implémenter la navigation à l'aide de location.hash, et les boutons de navigateur standard d'avant en arrière fonctionnent correctement. Lorsque vous accédez à un composant existant, la méthode onRoute () est appelée, où vous pouvez mettre à jour les données.

Structure d'application

• le composant racine <app-app>, accessible via window.APP, qui contient le routeur de page et la fonctionnalité globale;
• des panneaux avec des boutons contextuels (je ne les ai pas placés dans un composant séparé, mais je les ai intégrés à la disposition <app-app> pour simplifier la gestion des événements);
• menu déroulant (composant séparé);
• le conteneur <main> dans lequel les composants de la page seront ajoutés: <page-home>, <page-login>, <page-work> lors de leur ouverture.

• Le statut d'autorisation et le nom d'utilisateur actuel sont stockés dans le composant <app-app>, mais proviennent du composant <page-login> via un événement contextuel.
• Un temporisateur fait tic tac dans le composant <app-app>, qui envoie la valeur actuelle vers le bas au moyen d'un événement de diffusion qui n'est intercepté que dans le descendant de <page-work>.

la mise en oeuvre

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)

Objections et suggestions