Approche
La librairie Web Components fournie dans le Design System de l'autonomie est réalisée avec la technologie des Custom Elements et plus précisément avec les librairies Lit et Shoelace.
Qu'est-ce que les Custom Elements ?
Les Custom Elements, anciennement Web Components, sont un standard du web permettant de créer des éléments HTML customisés.
Une composante essentielle des Custom Elements est l’utilisation du shadow DOM.
Le shadow DOM fournit un moyen d'encapsuler les styles, le balisage et le JavaScript des composants web, les isolant ainsi du reste de l'arbre du document. Il s'agit d'un arbre DOM distinct, doté de ses propres styles, comportements et scripts, attaché à un élément spécifique mais séparé du DOM principal du document.
Cette isolation offre plusieurs avantages :
- Protection contre les conflits de styles et de scripts : Les styles et scripts internes ne s'échappent pas du composant, et les styles et scripts externes n'influencent pas le composant.
- Réutilisabilité accrue : Les composants peuvent être réutilisés sans craindre d'interférences stylistiques ou comportementales.
Gestion avec les frameworks
- Vanilla (HTML/JS)
Il n'y a pas d'adaptation à prendre en compte. Les éléments du kit web fonctionnent de la même manière que les éléments HTML natifs.
- Vue.js
Un guide est disponible pour l’intégration de custom elements au sein d’une application web basée sur Vue.js.
- Angular
Angular nécessite d'être configuré pour supporter les Customs Elements. Consulter la page Mise en place pour plus de détail.