Les Web Components et Angular : ce qu’il faut savoir

Les Web Components sont un ensemble de standards du web (Custom Elements, Shadow DOM, HTML Templates) permettant de créer des éléments HTML personnalisés, encapsulés et réutilisables, sans dépendre d’un framework JavaScript particulier. Angular les prend en charge nativement, ce qui ouvre des possibilités intéressantes pour la réutilisation de composants entre projets ou équipes.

Sommaire

1. Les trois standards qui composent les Web Components
2. Angular Elements : transformer un composant Angular en Web Component
3. Interopérabilité entre frameworks
4. Limites et points d’attention
5. Cas d’usage concrets

Les trois standards qui composent les Web Components

Le terme « Web Components » recouvre trois technologies complémentaires du navigateur. Les Custom Elements permettent de définir de nouvelles balises HTML (par exemple <mon-widget>) avec leur propre comportement JavaScript. Le Shadow DOM encapsule le balisage et le style d’un composant dans un arbre DOM isolé, évitant les conflits de CSS avec le reste de la page. Les HTML Templates (balises <template>) permettent de déclarer des fragments de balisage réutilisables, inertes tant qu’ils ne sont pas instanciés.

Ces trois briques, combinées, permettent de créer des composants véritablement portables : un Web Component fonctionne de la même façon qu’il soit utilisé dans une page HTML statique, une application Angular, React ou Vue.

Angular Elements : transformer un composant Angular en Web Component

Angular propose le module @angular/elements, qui permet d’empaqueter un composant Angular classique et de l’exposer comme un Custom Element standard. Le composant conserve son cycle de vie Angular (détection de changements, injection de dépendances) en interne, mais devient consommable depuis l’extérieur comme une simple balise HTML, avec ses attributs mappés sur les @Input() du composant.

Cette approche est particulièrement utile pour distribuer un composant (un widget de prise de rendez-vous, un lecteur vidéo personnalisé, un bloc de consentement cookies) destiné à être intégré dans des contextes variés, y compris des sites qui ne sont pas eux-mêmes développés en Angular.

Interopérabilité entre frameworks

L’un des intérêts principaux des Web Components est de permettre la cohabitation de plusieurs frameworks au sein d’une même application, ou la migration progressive d’un framework vers un autre. Un Web Component créé avec Angular Elements peut être consommé tel quel dans une page React, Vue ou dans du HTML brut, puisqu’il respecte les standards du navigateur plutôt qu’une API propre à un framework.

Cette interopérabilité a cependant un coût : chaque Web Component encapsulant un framework embarque une partie du runtime de ce framework, ce qui peut alourdir le poids total de la page si plusieurs composants issus de frameworks différents coexistent.

Limites et points d’attention

La communication entre Web Components et leur environnement passe par des attributs, des propriétés et des événements DOM personnalisés — un modèle plus verbeux que le data-binding auquel on est habitué à l’intérieur d’un framework. Le style global de l’application ne pénètre pas automatiquement dans le Shadow DOM, ce qui impose de gérer explicitement le thème visuel des composants exposés. Enfin, le support des formulaires natifs (association d’un Custom Element à un <form>) reste un point de vigilance selon les navigateurs ciblés.

Cas d’usage concrets

Les Web Components trouvent leur place lorsqu’un composant doit être partagé entre plusieurs applications indépendantes, potentiellement construites avec des stacks différentes : un design system d’entreprise distribué comme une bibliothèque de composants, un widget embarqué chez des clients tiers, ou la modernisation progressive d’une application historique en remplaçant ses briques une à une sans réécriture globale.

Chez Any In IT, nous évaluons au cas par cas si un Web Component ou un composant natif au framework est le choix le plus pertinent, en fonction du besoin réel de réutilisation inter-projets et de la cible technique du client.