Une longue traversée du désert
Les Web Components — Custom Elements, Shadow DOM, HTML Templates — ont été spécifiés dès 2011. Pendant une décennie, ils ont traîné une réputation de technologie trop complexe, mal supportée, et supplantée par des frameworks plus ergonomiques comme React ou Vue.
En 2025, ce tableau a changé. Le support navigateur est universel. Les Declarative Shadow DOM simplifient le rendu côté serveur. Et surtout, la fatigue des frameworks pousse les développeurs à réévaluer ce que la plateforme web offre nativement.
class TypesetBadge extends HTMLElement {
connectedCallback() {
const label = this.getAttribute('label') || 'Tag';
this.innerHTML = `
<span class="badge">${label}</span>
`;
}
}
customElements.define('ts-badge', TypesetBadge);
/* Utilisation dans le HTML */
<ts-badge label="Design"></ts-badge>
Declarative Shadow DOM : le changement clé
Le Shadow DOM était le principal frein à l'adoption côté serveur — impossible à rendre en HTML statique. Le Declarative Shadow DOM résout ce problème : on peut désormais définir le shadow DOM directement dans le HTML, sans JavaScript, ce qui le rend compatible avec le Server-Side Rendering.
« Les Web Components ne vont pas remplacer React. Mais pour les design systems, les bibliothèques de composants transversaux et le code long terme, ils offrent quelque chose qu'aucun framework ne peut donner : la pérennité. »
Cas d'usage pertinents en 2025
Les Web Components brillent dans des cas précis : design systems partagés entre plusieurs stacks (une même bibliothèque de composants utilisable dans React, Vue, Angular ou vanilla), widgets embarqués dans des pages tierces, et composants très stables qui ne doivent pas dépendre du cycle de vie d'un framework.
Pour une SPA complexe avec des interactions riches ? React ou Vue gardent leurs avantages. Pour une équipe pluristack qui veut capitaliser sur un seul design system ? Les Web Components sont maintenant un choix sérieux.