Les frameworks JavaScript ont popularisé l'idée de composants : des blocs d'interface autonomes et réutilisables. Mais saviez-vous que les navigateurs proposent nativement leur propre système de composants ? Les web components permettent de créer vos propres balises HTML, utilisables partout, sans dépendre d'un framework.
Que sont les web components ?
Les web components reposent sur trois technologies standardisées par le W3C et supportées par tous les navigateurs modernes :
- Les éléments personnalisés : vous définissez une nouvelle balise, par exemple une balise de carte produit, avec son propre comportement ;
- Le Shadow DOM : l'intérieur du composant est isolé du reste de la page, ses styles ne débordent pas et ne sont pas perturbés par ceux du site ;
- Les templates HTML : des fragments de code prêts à être clonés et insérés.
L'avantage majeur : l'indépendance
Un composant écrit avec React ne fonctionne qu'avec React. Un web component, lui, fonctionne partout : dans un site WordPress, une application Vue, une page HTML simple ou même un e-mail interactif dans certains cas. Il ne dépend que du navigateur.
Pour une entreprise qui possède plusieurs sites construits avec des technologies différentes, c'est un atout considérable : un même bouton, un même bandeau de cookies ou un même widget de prise de rendez-vous peut être partagé partout, avec une seule base de code à maintenir.
L'isolation des styles
Le Shadow DOM résout un problème bien connu : les conflits de CSS. Un composant inséré dans une page existante garde son apparence, quels que soient les styles du site qui l'accueille. À l'inverse, il ne risque pas de modifier l'apparence du reste de la page.
C'est particulièrement utile pour des widgets distribués à des partenaires, ou pour intégrer un module dans un ancien site dont la feuille de style est difficile à maîtriser.
Les limites à connaître
Les web components ne sont pas la solution miracle. Leur écriture en JavaScript natif reste plus verbeuse qu'avec un framework moderne, et la gestion de l'état d'une application complexe demande davantage de travail. Des bibliothèques légères comme Lit simplifient beaucoup leur création, tout en restant proches du standard.
Il faut aussi soigner le référencement et l'accessibilité : un contenu placé dans le Shadow DOM est bien interprété par les navigateurs, mais il faut veiller à ce que les informations importantes restent accessibles aux technologies d'assistance, avec les bons rôles et libellés.
Des cas d'usage concrets
Les web components sont particulièrement adaptés pour :
- Un design system partagé entre plusieurs sites ou applications ;
- Des widgets diffusés sur des sites tiers : simulateur, module de réservation, avis clients ;
- La modernisation progressive d'un site ancien, composant par composant ;
- Des éléments d'interface génériques : onglets, accordéons, fenêtres modales, carrousels.
Une technologie durable
Parce qu'ils reposent sur des standards du web, les web components ont une espérance de vie bien supérieure à celle d'un framework, dont les versions se succèdent et deviennent obsolètes. Un composant écrit aujourd'hui fonctionnera encore dans dix ans, sans réécriture.
Mon conseil
Si vous devez créer un élément d'interface destiné à vivre longtemps ou à être réutilisé sur plusieurs sites, pensez aux web components. Pour une application complète, un framework reste souvent plus productif, mais les deux approches se combinent très bien. C'est un outil précieux à avoir dans sa boîte, surtout quand la durabilité du code compte.
