Je m'étais interessé aux Web Components il y a quelques années et ... n'en avais alors pas vu l'intérêt. Après tout, créer des components, Angular, React et désormais Vue font ça très bien. En outre, rien ne garantissait que les principaux navigateurs allaient ajouter les standards qui permettraient de créer nativement des Web Components. Mais en 2018, l'adoption par les principaux navigateurs des quatre piliers que sont Custom Elements, Template, Shadow DOM et HTML Imports ouvrent des perspectives TRES intéressantes.
Créer des components natifs
Les Web Components vous permettent de créer des custom components comme le font vos frameworks Front préférés, mais en se passant desdits frameworks, les Web Components permettent une réutilisation et des performances bien meilleures. Cette amélioration des performances constatées lors de l'utilisation de custom components est précieuse dans le contexte d'une PWA. Enfin, si vous souhaitez utiliser les Web Components avec un framework, c'est également possible.
Les Custom Elements : pour enrichir le HTML
L'ensemble d'APIs mises à disposition par les Custom Elements vous permet de créer de nouveaux tag HTML que vous pouvez utiliser comme vous le faites en ajoutant à vos pages HTML des "div", des "input" etc. En outre, grâce aux callbacks mis à disposition, vous pouvez facilement réagir lorsque votre custom element est ajouté ou retiré du DOM, lorsqu'un attribut est modifié etc...
Le Shadow DOM : pour isoler le DOM de votre custom component
Bénéficier d'une véritable encapsulation, qui permet notamment de vous assurer que le style CSS de votre custom component ne va pas fuiter vers la page qui l'utilise - en modifiant la structure de la page qui l'utilise ou pire en la bouleversant complètement - est une fonctionnalité qui vous évitera bien des régressions.
HTML template
Le fameux tag
<template>
// contenu HTML "inerte" ici
</template>
utilisé depuis quelques années, est également fréquement utilisé lors de la création de Web Component. Un template permet en effet de créer du HTML qui reste inerte, jusqu'à ce que vous décidiez de l'utiliser.
Le cas typique consiste à boucler à l'aide d'un forEach() ou d'un map() afin de structurer à votre guise chaque objet d'un tableau d'objets à l'aide du HTML contenu dans le template. Ledit template est alors cloné, modifié par insertion de chaque donnée propre à l'objet couramment parsé, puis inséré dans une page.
HTML Imports
Les HTML imports permettent de créer une page HTML souvent brève, afin de l'insérer comme vous le faite couramment avec vos CSS, à l'aide d'un bon vieux link et de son attribut rel. Sauf qu'ici, la valeur de rel n'est pas une habituelle stylesheet mais un "import"
<link rel="import" href="my-page.html" id="my-page" />
Ce standard-ci sera probablement le moins utilisé, car Mozilla ne veut pas en entendre parlé, pour des raisons qui se défendent (la possiblité native de créer des modules grâce aux dernières version d'ECMAScript). Des polyfils sont disponibles.
Les Web Components, c'est pour quand ?
Pour maintenant, en tous cas pour 2018. Un indice fort : Ionic les a déjà adoptés par l'intermédiaire de Stencil et a constaté des gains de performance importants. Et ce n'est pas le genre de virage pris sur un coup de tête.
L'autre framework qui facilite la création des Web Components est Polymer. Mais avant d'utiliser des surcouches au dessus des Web Components come Stencil ou Polymer, il est judicieux de prendre en main les quatre standards cités précédemment. D'autant que la v3 de Polymer se fait encore un peu attendre et que cette période d'attente peut être très bien employée à monter en compétence sur Custom elements, Shadow DOM, HTML templates et HTML Imports.