`connectedCallback` et `disconnectedCallback`
Exécutez du code lorsqu’un élément personnalisé est ajouté au DOM ou en est retiré.
`connectedCallback` et `disconnectedCallback` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Rappels du cycle de vie des éléments
Les éléments personnalisés exposent quatre points d’extension du cycle de vie : connectedCallback, disconnectedCallback, attributeChangedCallback et adoptedCallback. Ils correspondent aux étapes bien connues de montage, de démontage et de mise à jour de tout modèle de composant.
connectedCallback s’exécute lors de l’insertion
connectedCallback s’exécute chaque fois que l’élément est inséré dans l’arbre du DOM. C’est l’endroit approprié pour lire les attributs, générer le contenu, ajouter des écouteurs d’événements et démarrer des minuteries ou des abonnements.
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}Il peut être appelé plusieurs fois
Si l’élément est retiré puis réinséré, connectedCallback se déclenche de nouveau à chaque insertion. L’idempotence est importante : protégez l’initialisation qui ne doit avoir lieu qu’une seule fois à l’aide d’un indicateur, ou effectuez toute la configuration à chaque fois et laissez disconnectedCallback procéder au nettoyage.
Déclenchement de disconnectedCallback lors du retrait
disconnectedCallback s’exécute lorsque l’élément est retiré du DOM. C’est ici que vous arrêtez les intervalles, annulez les requêtes réseau, supprimez les écouteurs attachés au document et libérez toute ressource qui risquerait autrement de fuir.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Collecte mémoire et écouteurs
Un élément associé à un intervalle actif, à un écouteur du document ou à une promesse non résolue ne sera pas récupéré par le ramasse-miettes, même après sa déconnexion. Associez toujours chaque abonnement créé dans connectedCallback à un nettoyage dans disconnectedCallback.
Reconnexion après un déplacement
Déplacer un élément avec parentB.appendChild(element) le retire d’abord de son parent initial, puis l’insère dans son nouveau parent. Le navigateur déclenche disconnectedCallback, puis connectedCallback. Prévoyez cette configuration et ce nettoyage temporaires lors des déplacements.
Moment de la connexion initiale
Pour un élément écrit directement en HTML, connectedCallback se déclenche pendant l’analyse initiale, après le constructeur. Les attributs ont déjà été analysés à ce stade ; la lecture de this.getAttribute("name") renvoie donc la valeur du balisage.
Les enfants ne sont peut-être pas encore analysés
Pour un élément dont les enfants sont déclarés en HTML, ceux-ci peuvent ne pas encore se trouver dans le DOM lorsque connectedCallback se déclenche (l’analyseur poursuit son travail). Utilisez un MutationObserver ou lisez les enfants dans requestAnimationFrame si vous devez accéder aux enfants déclarés.
adoptedCallback
adoptedCallback se déclenche lorsqu’un élément est déplacé vers un nouveau document (généralement via document.adoptNode). La plupart des applications ne l’utilisent jamais ; il est surtout utile pour les composants déplacés entre des cadres intégrés.
Associer AbortController
Un schéma fiable consiste à créer un AbortController dans connectedCallback, à transmettre { signal: this.controller.signal } à chaque addEventListener et à chaque fetch, puis à appeler this.controller.abort() dans disconnectedCallback pour tout supprimer en une seule fois.
Éviter les tâches lourdes dans le constructeur
Le constructeur s’exécute même lorsque l’élément est créé via document.createElement et n’est jamais inséré. Limitez le constructeur à la définition des valeurs de propriété initiales ; reportez le rendu, la récupération des données et l’ajout des écouteurs à connectedCallback.
Vérification des connaissances
Pourquoi les abonnements et les minuteries doivent-ils être configurés dans connectedCallback plutôt que dans le constructeur de l’élément ?
Résumé
connectedCallback (insertion) et disconnectedCallback (retrait) délimitent la durée de vie active de l’élément. Configurez les écouteurs, les intervalles et les requêtes réseau dans connectedCallback ; supprimez-les dans disconnectedCallback pour éviter les fuites. Tous deux peuvent se déclencher plusieurs fois : utilisez AbortController pour un nettoyage groupé efficace.
Questions Fréquemment Posées
La leçon « `connectedCallback` et `disconnectedCallback` » est-elle gratuite ?
Oui — le texte complet de « `connectedCallback` et `disconnectedCallback` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `connectedCallback` et `disconnectedCallback` » ?
Exécutez du code lorsqu’un élément personnalisé est ajouté au DOM ou en est retiré. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « `connectedCallback` et `disconnectedCallback` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Définir des éléments avec `customElements.define`
- `connectedCallback` et `disconnectedCallback`
- Attributs observés et `attributeChangedCallback`
- Étendre les éléments intégrés