Définir des éléments avec `customElements.define`
Enregistrez une classe d’élément personnalisée dans le navigateur.
Définir des éléments avec `customElements.define` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.
Que sont les éléments personnalisés ?
Les éléments personnalisés vous permettent d’inventer vos propres balises HTML, associées à une classe JavaScript. Une fois défini, <my-card> se comporte comme n’importe quel élément natif : vous pouvez l’écrire en HTML, le rechercher, le mettre en forme, le programmer et l’utiliser dans des frameworks sans modification.
L’exigence du trait d’union
Chaque nom d’élément personnalisé doit contenir au moins un trait d’union : user-avatar, app-button, my-card. Le trait d’union distingue les éléments personnalisés des balises HTML natives actuelles et futures, et cette règle est imposée par la spécification.
Définir une classe
Un élément personnalisé est une classe qui étend HTMLElement (ou une sous-classe native). La classe peut déclarer un constructeur et des rappels de cycle de vie. Les propriétés et méthodes publiques de la classe constituent l’interface de programmation de l’élément.
class MyCard extends HTMLElement {
constructor() {
super();
this.textContent = "Hello from MyCard";
}
}Enregistrer avec define
customElements.define("my-card", MyCard) enregistre la classe sous le nom de balise indiqué. Après l’enregistrement, chaque <my-card> déjà présent ou ajouté ultérieurement au document est transformé en instance de cette classe.
super() est obligatoire
Le constructeur doit appeler super() dans sa première instruction, avant toute utilisation de this. Ignorer super() déclenche l’erreur « Failed to construct 'HTMLElement' ». Considérez cela comme la règle standard des constructeurs de classes JavaScript.
Aucune lecture du DOM dans le constructeur
Le constructeur ne doit pas lire les attributs ni les enfants de l’élément : ils n’ont peut-être pas encore été analysés au moment de la construction. Déplacez la configuration qui manipule le DOM dans connectedCallback, qui n’est exécuté qu’une fois l’élément présent dans le document.
L’enregistrement est permanent
Un nom d’élément ne peut être enregistré qu’une seule fois par page. Redéfinir le même nom déclenche une NotSupportedError. Rechargez la page pour tester les modifications pendant le développement : en production, enregistrez chaque composant une seule fois au démarrage.
Polyfills
Les éléments personnalisés sont pris en charge par tous les navigateurs modernes. Pour les navigateurs très anciens (pour la plupart obsolètes), le polyfill webcomponents.js fournit une solution de repli. Les nouveaux projets peuvent utiliser l’implémentation native et se passer entièrement du polyfill.
Détecter l’état de la définition
customElements.get("my-card") renvoie la classe si elle est définie, et undefined dans le cas contraire. customElements.whenDefined("my-card") renvoie une promesse qui se résout une fois l’élément enregistré : c’est utile pour le code qui doit attendre des définitions chargées tardivement.
customElements.whenDefined("my-card").then((Class) => {
console.log("MyCard is ready");
});Utiliser l’élément
Une fois défini, utilisez l’élément exactement comme une balise native : écrivez-le en HTML (<my-card></my-card>), créez-le avec document.createElement("my-card") ou instanciez-le avec new MyCard() avant de l’insérer. Ces trois chemins produisent la même instance mise à niveau.
Conventions de nommage
Préfixez les éléments personnalisés avec le nom d’un projet ou d’une entreprise (cd-card, app-modal) afin d’éviter les collisions avec d’autres bibliothèques présentes sur la même page. L’écosystème des composants Web n’est pas centralisé : n’importe quel code de votre page peut enregistrer n’importe quel nom, et le premier enregistrement l’emporte.
Vérification des connaissances
Pourquoi chaque nom d’élément personnalisé doit-il contenir un trait d’union ?
Résumé
Les éléments personnalisés sont des classes JavaScript qui étendent HTMLElement et sont enregistrées avec customElements.define("name", Class), leur nom devant contenir un trait d’union. Le constructeur doit d’abord appeler super() et ne doit pas lire le DOM : reportez les opérations sur le DOM à connectedCallback. Les éléments définis se comportent exactement comme les balises natives, partout.
Questions Fréquemment Posées
La leçon « Définir des éléments avec `customElements.define` » est-elle gratuite ?
Oui — le texte complet de « Définir des éléments avec `customElements.define` » 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 « Définir des éléments avec `customElements.define` » ?
Enregistrez une classe d’élément personnalisée dans le navigateur. 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 1 sur 4.
Combien de temps prend la leçon « Définir des éléments avec `customElements.define` » ?
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