web-dev-qa-db-fra.com

Différence entre constructeur et connectedCallback dans les éléments personnalisés v1

Je suis nouveau dans le développement Web et récemment, j'ai vu beaucoup de débats et de discussions sur Custom Elements v1. Ils vous permettent de définir vos propres éléments avec leurs propres comportements personnalisés et si le DOM fantôme est utilisé, avec des styles étendus.

Lorsque j'en ai pris connaissance dans le site this , je n'ai pas compris le tableau sous "Réactions des éléments personnalisés". Quelqu'un peut-il expliquer la différence entre l'utilisation du "constructeur" et de "connectedCallback" ainsi que les termes "créé ou mis à niveau" et "inséré dans le DOM"?.

Pour plus d'informations, la définition de mon élément personnalisé se trouve dans un fichier séparé et il utilise le DOM fantôme. J'ai utilisé HTML Import pour importer la définition de l'élément dans le document principal.

javascripthtmlweb-componentshadow-domcustom-element
16
Shashank

Comme l'a déjà déclaré Juvian dans les commentaires:

  • constructor() est appelée lorsque l'élément est créé .
  • connectedCallback() est appelée lorsque (après) l'élément est attaché au DOM.

L'appel constructor() n'est pas spécifique aux éléments personnalisés, il se produit avec toute création d'objet (généralement créée avec l'opérateur new), et pas seulement les éléments HTML.

Dans l'appel constructor(), vous pouvez créer le DOM fantôme, mais vous ne pouvez pas ajouter de nœuds à l'intérieur du DOM normal et vous ne pouvez pas non plus ajouter ou définir un attribut.

À propos de mise à niveau :

La mise à niveau se produit lorsqu'une balise inconnue déclarée dans le code HTML est définie par la suite (par la méthode customElements.define()). L'élément "inconnu" devient un élément "personnalisé". Les méthodes constructor() et connectedCallback() sont alors appelées.

Remarque : lorsqu'un élément est créé (comme inconnu), puis défini, il n'est mis à niveau que lorsqu'il est attaché.

class CE extends HTMLElement {
  constructor() {
    super()
    console.info( 'constructed' )
  }
  connectedCallback() {
    console.info( 'connected' )
    this.innerHTML = 'Hello'  //can't be set in constructor()
  }
}


B1.onclick = function () {
  ce = document.createElement( 'c-e' )
  ce.textContent = 'unknown'
}

B2.onclick = function () {
  document.body.appendChild( ce )
}

B3.onclick = function () {
  customElements.define( 'c-e', CE)  
}
<button id=B1>create</button>
<button id=B2>attach</button>
<button id=B3>define</button>

Essayez différentes combinaisons avec l'extrait ci-dessus:

  • Exécutez ensuite: 1 Créer - 2 Attacher - 3 Définir
  • Exécutez ensuite: 1 Créer - 2 Définir - 3 Attacher
  • Exécuter ensuite: 1 Définir - 2 Créer - 3 Attacher
25
Supersharp