Web components

Qu'est-ce que les web components ?

Les web components sont un ensemble de standards natifs du navigateur pour créer des éléments HTML réutilisables et autonomes. Un développeur définit une nouvelle balise, par exemple <product-card>, avec sa propre structure, ses styles et sa logique, puis l'utilise sur n'importe quelle page comme un élément natif.

Comme ils font partie de la plateforme, les web components ne nécessitent aucun framework et fonctionnent dans tous les navigateurs modernes. C'est un moyen courant de partager des éléments d'interface entre projets et entre équipes qui utilisent des technologies différentes.

‍

Les trois standards derrière les web components

• Custom elements : définissent de nouvelles balises HTML et leur cycle de vie.
• Shadow DOM : encapsule le balisage et le CSS pour que les styles ne fuient ni vers l'intérieur ni vers l'extérieur.
• Templates HTML : déclarent un balisage inerte avec <template> et <slot>, cloné au besoin.

‍

Comment créer un élément personnalisé

class HelloCard extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = `<p>Bonjour, ${this.getAttribute('name')}</p>`;
  }
}
customElements.define('hello-card', HelloCard);

L'élément s'utilise ensuite en HTML avec <hello-card name="Alex"></hello-card>. Le navigateur exécute le code de la classe chaque fois que la balise apparaît dans la page.

‍

Web components et composants de framework

‍

Bonnes pratiques et pièges courants

• Utilisez-les pour des éléments d'interface partagés et indépendants d'un framework : boutons, cartes, widgets.
• Exposez la personnalisation via des attributs, des slots et des propriétés CSS personnalisées.
• Gardez le contenu important dans le DOM classique quand il compte pour le SEO, car le contenu du Shadow DOM peut être plus difficile à indexer.
• Respectez les bases de l'accessibilité : rôles, libellés et navigation clavier ne sont pas automatiques.
• Envisagez une bibliothèque légère comme Lit pour réduire le code répétitif.

‍

Web components chez BeBranded

Des composants réutilisables sont la base d'un produit maintenable, quelle que soit la stack choisie. Quand nous concevons une application web, notre équipe arbitre au cas par cas entre web components natifs et framework, selon les besoins de réutilisation, la performance et les compétences de l'équipe cliente.