# Élément personnalisé

> Balise HTML définie par un développeur plutôt que par la spécification du langage, dont le comportement est encapsulé dans une classe JavaScript et réutilisable comme n'importe quel élément natif.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/element-personnalise/

Créer un compteur, un carrousel ou une carte interactive oblige d'ordinaire à empiler du HTML, du CSS et du JavaScript séparément, puis à les relier soigneusement. La technologie des Web Components permet à la place d'emballer les trois dans une seule balise réutilisable, avec un nom obligatoirement composé d'au moins un tiret pour éviter tout conflit avec une future balise standard.

## Définition minimale

On étend la classe native `HTMLElement` puis on enregistre le nouveau nom auprès du navigateur :

```
class CarteProduit extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Produit chargé</p>';
  }
}
customElements.define( 'carte-produit', CarteProduit );
```

Une fois défini, l'élément s'utilise ensuite directement dans le HTML comme `<carte-produit></carte-produit>`, sans appel JavaScript supplémentaire pour l'initialiser.

## Lien avec WordPress

Cette technologie reste indépendante de l'éditeur de blocs, qui repose plutôt sur React, mais certains thèmes ou extensions l'utilisent pour des composants frontaux légers qui n'ont pas besoin du chargement complet de cette bibliothèque.

## Bon à savoir

- Le support natif du navigateur dispense de toute bibliothèque externe, contrairement à des composants réactifs classiques.
- Le nom personnalisé choisi doit contenir au moins un tiret pour rester distinguable des balises HTML standard actuelles ou à venir, une règle imposée par la spécification elle-même.
- Le Shadow DOM, souvent associé à cette technologie, permet d'encapsuler le style interne du composant pour qu'il n'entre pas en conflit avec les feuilles de style du reste de la page qui l'accueille.