Les Web Components sont un ensemble d'API natives du navigateur pour construire des éléments HTML personnalisés réutilisables et encapsulés — indépendants du framework et basés sur les standards. Trois technologies se combinent :
Les Web Components sont un ensemble d'API natives du navigateur pour construire des éléments HTML personnalisés réutilisables et encapsulés — indépendants du framework et basés sur les standards. Trois technologies se combinent :
<template>, <slot>) — markup inerte et réutilisable.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
Les styles à l'intérieur de la racine shadow sont scopés — le CSS de la page ne peut pas entrer, et le CSS du composant ne peut pas s'échapper. Cela résout le problème du CSS global nativement :
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Les Web Components vous permettent de construire des widgets réutilisables qui fonctionnent dans n'importe quel framework (ou aucun) avec une véritable encapsulation du style et du DOM — idéal pour les systèmes de design et les micro-frontends partagés entre les équipes utilisant différentes stacks.
C'est ainsi que les bibliothèques comme Shoelace livrent des composants indépendants du framework.
Les compromis (API verbeuse, complexité du SSR/styling) signifient que les développeurs d'applications préfèrent souvent React/Vue, mais la primitive de plateforme est puissante et basée sur les standards.