Les composants web du contexte sont plus faciles que vous ne le pensez

Cet article explore les rappels de cycle de vie souvent négligés des composants Web, démontrant comment ils permettent des éléments respectueux du contexte. Nous allons créer un composant Web qui réagit à son environnement, présentant la puissance de ces fonctions.

Aperçu de la série

Cet article fait partie d'une série sur la simplification du développement des composants Web:

• Composants Web: plus facile que vous ne le pensez
• Composants Web interactifs: plus facile que vous ne le pensez
• Utilisation de composants Web dans WordPress: plus facile que vous ne le pensez
• Suralimentation des éléments intégrés avec des composants Web: plus facile que vous ne le pensez
• Composants Web conscients du contexte: plus facile que vous ne le pensez ( cet article )
• Pseudo-classes et pseudo-éléments des composants Web: plus facile que vous ne le pensez

Rappels du cycle de vie des composants Web

Quatre rappels clés régissent le cycle de vie d'un composant Web:

• connectedCallback : tiré lorsque l'élément est ajouté au DOM.
• disconnectedCallback : tiré lorsque l'élément est retiré du DOM.
• adoptedCallback : tiré lorsque l'élément est déplacé vers un nouveau document.
• attributeChangedCallback : tiré lorsqu'un attribut observé change.

Illustrons-le avec un exemple pratique.

Composant de personne post-apocalyptique

Nous allons créer un<postapocalyptic-person></postapocalyptic-person> composant. Chaque personne est humaine ou zombie, déterminée par la classe .human ou .zombie sur son élément parent. Le composant affichera une image appropriée à l'aide d'un Dom Shadow.

 CustomElements.define (
  "Personne postapocalyptique",
  La classe étend htmlelement {
    constructeur () {
      super();
      this.shadowRoot = this.attacheshadow ({mode: "open"});
    }
    // ... des rappels de cycle de vie seront ajoutés ici ...
  }
));

Notre HTML initial:

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

Utilisation de connectedCallback

connectedCallback est appelé lorsque<postapocalyptic-person></postapocalyptic-person> est ajouté à la page. Nous allons l'utiliser pour ajouter l'image:

 connectedCallback () {
  const Image = Document.CreateElement ("IMG");
  if (this.parentNode.classList.Contains ("Humans")) {
    image.src = "https://assets.codepen.io/1804713/lady.png";
  } else if (this.parentNode.classList.Contains ("Zombies")) {
    image.src = "https://assets.codepen.io/1804713/ladyz.png";
  }
  this.shadowroot.appendChild (image);
}

Cela garantit que l'image correcte est affichée en fonction de la classe du parent. Remarque: connectedCallback peut se déclencher plusieurs fois; Utilisez this.isConnected pour vérifier l'état de la connexion.

Compter les personnes avec connectedCallback

Ajoutons des boutons pour ajouter / supprimer des personnes et suivre les comptes:

<div>
  <button id="addbtn">Ajouter une personne</button>
  <button id="rmvbtn">Enlever la personne</button>
  <br>Humains: <span id="human-count">0</span>
  Zombies: <span id="zombie-count">0</span>
</div>

Auditeurs d'événements de bouton:

 // ... (Ajouter / supprimer la logique de la personne) ...

connectedCallback mis à jour pour mettre à jour le nombre:

 connectedCallback () {
  // ... (logique d'image) ...
  // Mette à jour le nombre basé sur la source d'image
}

Mise à jour des comptes avec disconnectedCallback

disconnectedCallback Dimingements Counts lorsqu'une personne est supprimée. Nous utiliserons la source d'image comme proxy pour le type:

 déconnectéCallback () {
  const Image = this.shadowroot.QuerySelector ('img');
  // décompte de la diminution basée sur la source d'image
}

Détection attributeChangedCallback clown avec adoptedCallback

Nous présenterons la possibilité de clowns cachés, en les déplaçant vers un<iframe></iframe> Utilisation adoptedCallback et de les révéler avec attributeChangedCallback . Les détails de cet exemple avancé sont omis pour la concision, mais le concept de base implique d'utiliser adoptedCallback pour détecter quand un composant est déplacé vers un nouveau document et attributeChangedCallback pour réagir aux modifications d'attribut, mettant à jour l'image en conséquence.

Cela illustre comment les rappels de cycle de vie fournissent des outils puissants pour créer des composants Web dynamiques et conscients du contexte, ce qui les rend plus polyvalents et réactifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!