JavaScript Academy · Leçon

Définir des éléments personnalisés

Enregistrez des éléments avec l’API customElements.

Définir des éléments personnalisés est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Que sont les éléments personnalisés ?

Les éléments personnalisés vous permettent de définir vos propres balises HTML, associées à des classes JavaScript. Au lieu d’assembler un enchevêtrement de div, vous créez un composant réutilisable et autonome, comme <user-card>.

Ils font partie du standard Composants Web.
Ils fonctionnent nativement dans les navigateurs, sans framework obligatoire.
Le nom d’un élément personnalisé doit contenir un trait d’union (par exemple my-button).

Le registre customElements

Le navigateur expose un registre global à l’adresse window.customElements. Vous enregistrez une nouvelle balise en appelant customElements.define(name, constructor).

Une fois la balise définie, chaque balise correspondante du document est transformée en instance de votre classe.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

Étendre HTMLElement

Un élément personnalisé est une classe qui extends HTMLElement. La classe de base fournit à votre élément toutes les fonctionnalités DOM standard (attributs, événements et styles).

Appelez toujours super() en premier dans le constructeur afin que l’élément soit correctement initialisé.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Afficher du contenu

À l’intérieur de l’élément, vous pouvez définir this.innerHTML ou utiliser des méthodes DOM pour construire le contenu. Il est courant d’effectuer l’affichage lorsque l’élément est connecté à la page.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Utiliser l’élément en HTML

Après l’enregistrement, utilisez votre balise comme n’importe quel élément intégré. Vous pouvez la placer directement dans le balisage ou la créer avec document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Les règles du constructeur

Le constructeur s’exécute lorsqu’une instance est créée. Des règles strictes s’appliquent :

Appelez super() en premier.
N’inspectez pas les attributs ou les enfants ici, et n’en ajoutez pas.
Reportez les opérations sur le DOM à connectedCallback.

Utilisez le constructeur uniquement pour définir l’état initial et configurer les écouteurs d’événements.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Ajout d’un comportement

Comme votre élément est un véritable nœud DOM, vous pouvez lui ajouter des écouteurs d’événements et mettre à jour son contenu en réaction aux interactions.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

L’exigence du trait d’union

Les noms d’éléments personnalisés doivent contenir un trait d’union. Cela garantit qu’ils n’entreront jamais en conflit avec les éléments HTML intégrés actuels ou futurs.

my-widget est valide.
mywidget est invalide et lève une erreur.
Les noms ne tiennent pas compte de la casse, mais s’écrivent en minuscules.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined et get

Deux méthodes utiles du registre :

customElements.get(name) renvoie le constructeur, ou undefined si l’élément n’est pas enregistré.
customElements.whenDefined(name) renvoie une promesse qui se résout dès que l’élément est défini.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Définition unique

Chaque nom ne peut être enregistré qu’une seule fois. Appeler define avec un nom déjà utilisé lève une erreur. Dans les modules partagés, prévoyez une protection contre les doubles enregistrements.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Pourquoi les éléments personnalisés sont importants

Les éléments personnalisés vous offrent une interface utilisateur indépendante de tout framework, encapsulée et réutilisable. Ils permettent de :

Standardiser la réutilisation des composants dans n’importe quelle architecture.
S’intégrer au cycle de vie propre au navigateur.
S’associer naturellement au DOM fantôme et aux modèles (abordés plus loin).

Vérification rapide

Vérifiez votre compréhension de la définition des éléments personnalisés.

Récapitulatif

Vous avez appris à définir des éléments personnalisés :

customElements.define(name, class) enregistre une balise.
La classe extends HTMLElement et appelle d’abord super().
Les noms doivent contenir un trait d’union.
Affichez le contenu dans connectedCallback, et non dans le constructeur.
get et whenDefined vous aident à vérifier l’état de l’enregistrement.

Ensuite, nous explorerons le cycle de vie complet d’un élément personnalisé.

Questions Fréquemment Posées

La leçon « Définir des éléments personnalisés » est-elle gratuite ?

Oui — le texte complet de « Définir des éléments personnalisés » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Définir des éléments personnalisés » ?

Enregistrez des éléments avec l’API customElements. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 personnalisés » ?

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 JavaScript Academy ?

Oui. Chaque leçon JavaScript 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

← Retour à JavaScript Academy