Dans le paysage frontend moderne, les développeurs s'éloignent de plus en plus des bibliothèques UI spécifiques aux frameworks pour privilégier des solutions standardisées et interopérables. Voici les Web Components : un ensemble de technologies vous permettant de créer des éléments personnalisés réutilisables. Alors que des frameworks comme React, Vue et Angular ont popularisé l'architecture basée sur les composants, les Web Components s'exécutent nativement dans le navigateur sans nécessiter de compilation ni de regroupement (bundling). Dans ce guide, nous explorerons les deux piliers fondamentaux des Web Components — les Custom Elements et le Shadow DOM — et nous construirons un composant fonctionnel et encapsulé à partir de zéro.
Comprendre les concepts fondamentaux
Pour construire efficacement des Web Components, il est essentiel de comprendre la distinction entre les Custom Elements et le Shadow DOM. Les Custom Elements constituent la colonne vertébrale, vous permettant de définir vos propres balises HTML (comme <my-button>) et d'interagir avec le cycle de vie des éléments du navigateur. Le Shadow DOM offre une encapsulation du style et de la structure, garantissant que les styles et le balisage de votre composant ne fuient pas vers l'extérieur et ne sont pas affectés par le reste de la page.
En combinant ces deux technologies, vous obtenez une véritable modularité. Votre composant devient une unité autonome qui peut être intégrée dans n'importe quel projet, quelle que soit la pile technologique sous-jacente.
Étape 1 : Création de la classe d'élément personnalisé
La première étape consiste à créer une classe JavaScript qui hérite de HTMLElement. Cette classe définira le comportement et le cycle de vie de votre élément personnalisé. Nous commencerons par créer un simple composant "Carte d'information". Ce composant affichera un titre, une icône et une description.
Voici la structure de base de notre classe :
class InfoCard extends HTMLElement {
constructor() {
super();
// Attacher le Shadow DOM ici à l'étape suivante
}
connectedCallback() {
// Cette méthode est appelée lorsque le composant est ajouté au DOM
this.render();
}
}La méthode de cycle de vie connectedCallback est cruciale. Elle agit comme l'équivalent de componentDidMount dans React, signalant que l'élément fait désormais partie du document et est prêt à être rendu.
Étape 2 : Implémentation de l'encapsulation Shadow DOM
Pour garantir que notre composant a l'apparence et le comportement indépendants du document parent, nous devons attacher une racine Shadow. Nous le faisons dans le constructeur en appelant this.attachShadow(). Le mode 'open' permet d'accéder à la racine shadow via JavaScript depuis l'extérieur du composant, ce qui est utile pour le débogage, bien que le mode 'closed' offre une encapsulation plus stricte.
class InfoCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.render();
}
render() {
// Définir les styles et le balisage internes
this.shadowRoot.innerHTML = `
Alerte système
Il s'agit d'un composant Web natif.
`;
}
}Remarquez l'utilisation de la portée CSS (CSS scoping). Comme ces styles se trouvent à l'intérieur du Shadow DOM, ils n'affecteront pas la feuille de style globale, et les styles globaux n'affecteront pas la structure interne du composant. Cela résout l'un des problèmes les plus persistants du développement web : les collisions de styles.
Étape 3 : Enregistrement de l'élément
Définir la classe ne suffit pas ; le navigateur doit savoir que <info-card> fait référence à notre classe personnalisée. Nous utilisons customElements.define() pour enregistrer le composant. Il est important de noter que les noms des éléments personnalisés doivent contenir un tiret (par exemple, info-card) pour éviter les conflits avec les futurs éléments HTML natifs.
customElements.define('info-card', InfoCard);Une fois enregistré, vous pouvez utiliser la balise <info-card></info-card> n'importe où dans le corps de votre HTML. Le composant s'instanciera et se rendra automatiquement.
Conclusion
Construire des Web Components ne consiste pas seulement à apprendre une nouvelle API ; c'est adopter une philosophie de code réutilisable et conforme aux standards. En exploitant les Custom Elements et le Shadow DOM, vous créez des primitives d'interface utilisateur robustes et indépendantes des frameworks. Bien que cet exemple basique utilise innerHTML pour simplifier les choses, dans des environnements de production, vous pourriez envisager d'utiliser des littéraux de modèle (template literals) ou les imports HTML pour de meilleures performances et maintenabilité.
À mesure que les normes du navigateur continuent d'évoluer, les Web Components deviennent la colonne vertébrale du web moderne. Que vous construisiez un système de design, une bibliothèque ou une application monopage (SPA), maîtriser ces fondamentaux fera de vous un développeur frontend plus polyvalent et efficace.