#Barcamp : Introduction aux Webcomponents

Qu’est-ce que les Webcomponents ?

C’est un ensemble d’outils permettant de créer de nouvelles balises enrichies telles que la balise video. Les nouvelles balises créées avec ces outils factorisent des éléments complexes (comme les carrousels, les slideshow) qui peuvent aussi être placées dans des conteneurs pour être facilement réutilisables.

Ce que ça change

Quatre nouveaux outils :

  • les customs éléments, pour créer ses propres balises
  • le shadow DOM, pour encapsuler du HTML, CSS et JavaScript dans un webcomponent (le tout sous un custom élément)
  • les templates HTML, pour placer dans un paquet tout ce qui défini notre élément
  • les imports HTML

Avantages principaux

Lorsqu’un webcomponent est chargé, le parcours du DOM offre de meilleures performances car le contenu du shadow DOM n’est pas analysé. Réciproquement, le parcours dans le shadow DOM est plus rapide à l’intérieur de celui-ci car il ne tient pas compte du DOM extérieur.

On peut importer des bibliothèques JavaScript dans des templates, le navigateur prendra soin de n’importer qu’une fois les fichiers nécessaires.

Mises en garde

Les éléments encapsulés dans du shadow DOM peuvent « déteindre » sur le DOM principal (par exemple du CSS), ce qui en fait des conteneurs non hermétiques.

La technologie n’est supportée nativement que dans Google Chrome. Firefox, IE et Safari ne peuvent utiliser des webcomponents qu’avec une bibliothèque JavaScript qui en émule le fonctionnement.

À ce jour, en 2016, la technologie ne semble toujours pas stable.

Voici un tutoriel pour aller plus loin.

Une pensée sur “#Barcamp : Introduction aux Webcomponents”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.