Attributs observés et `attributeChangedCallback`
Réagissez aux modifications d’attributs HTML dans les éléments personnalisés.
Attributs observés et `attributeChangedCallback` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Réagir aux changements d’attributs
Les éléments HTML exposent leur état via des attributs. Pour réagir lorsque <my-card name="A"> devient name="B", déclarez la liste des attributs observés et implémentez attributeChangedCallback sur la classe.
observedAttributes statique
Déclarez les attributs qui vous intéressent à l’aide d’un accesseur statique : static get observedAttributes() { return ["name", "open"]; }. Seuls les attributs de cette liste déclenchent la fonction de rappel ; les autres sont ignorés pour préserver les performances.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Signature de la fonction de rappel
attributeChangedCallback(name, oldValue, newValue) se déclenche à chaque changement d’un attribut observé. Les trois paramètres sont des chaînes de caractères (ou null si l’attribut est absent). Utilisez-les pour mettre à jour l’état interne et effectuer un nouveau rendu.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Déclenchement pour les attributs initiaux
La fonction de rappel se déclenche une fois pour chaque attribut observé présent au moment de la mise à niveau de l’élément. Ainsi, un rendu dans attributeChangedCallback gère à la fois le rendu initial et les rendus ultérieurs, sans traitement distinct dans connectedCallback.
Réflexion entre propriétés et attributs
Pour les attributs booléens, reflétez la propriété vers l’attribut et inversement : définir element.open = true doit définir l’attribut open, et supprimer l’attribut doit réinitialiser la propriété. Cela correspond au comportement d’éléments intégrés comme <details>.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Éviter les boucles infinies
Si attributeChangedCallback définit des attributs qu’il observe, vous risquez de créer une boucle infinie. Protégez toujours la fonction de rappel avec if (oldValue === newValue) return; au début, et évitez de modifier les attributs observés depuis cette fonction.
Attributs booléens
Selon la convention HTML, les attributs booléens sont « définis » par leur présence (disabled, open) et « non définis » par leur absence. Leur valeur est ignorée : disabled="false" signifie tout de même que l’élément est désactivé. Vérifiez leur présence avec hasAttribute ; ne comparez jamais la chaîne de caractères.
JSON dans les attributs
Les attributs sont des chaînes de caractères. Pour transmettre des données structurées, utilisez JSON.stringify dans le balisage et analysez le résultat dans attributeChangedCallback : <my-chart data-points='[1,2,3]'>. Pour les volumes de données importants, préférez transmettre les données en affectant directement une propriété JS.
Par rapport à MutationObserver
Vous pourriez observer les changements d’attributs avec un MutationObserver, mais le couple observedAttributes + attributeChangedCallback est plus rapide (aucune configuration d’observateur), déclaratif (la liste des noms observés est visible dans la classe) et conforme aux pratiques usuelles des composants web.
Performances : regrouper les rendus
Plusieurs attributs qui changent rapidement déclencheraient plusieurs fonctions de rappel et plusieurs rendus. Regroupez-les avec queueMicrotask ou requestAnimationFrame afin que le rendu effectif n’ait lieu qu’une fois par microtâche ou par image, quel que soit le nombre d’attributs modifiés.
Piège courant
Oublier d’ajouter un attribut à observedAttributes désactive silencieusement la fonction de rappel pour cet attribut. Si votre composant ne réagit pas à un appel à setAttribute, la première chose à vérifier est la liste statique observedAttributes.
Vérification des connaissances
Que se passe-t-il si vous appelez indirectement attributeChangedCallback en définissant un attribut observé dans la fonction de rappel ?
Résumé
Déclarez les attributs à suivre à l’aide de l’accesseur statique observedAttributes ; attributeChangedCallback(name, oldValue, newValue) se déclenche pour chaque changement, y compris lors de l’analyse initiale. Réfléchissez les propriétés vers les attributs pour l’état booléen, protégez-vous contre les boucles infinies et regroupez les rendus avec requestAnimationFrame pour améliorer les performances.
Questions Fréquemment Posées
La leçon « Attributs observés et `attributeChangedCallback` » est-elle gratuite ?
Oui — le texte complet de « Attributs observés et `attributeChangedCallback` » 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 « Attributs observés et `attributeChangedCallback` » ?
Réagissez aux modifications d’attributs HTML dans les éléments personnalisés. 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 3 sur 4.
Combien de temps prend la leçon « Attributs observés et `attributeChangedCallback` » ?
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