Avec les fra­me­works Ja­vaS­cript tels que React et Angular, les dé­ve­lop­peurs peuvent définir des éléments Web réu­ti­li­sables. Ces fra­me­works utilisent toutefois un autre standard qui empêche dans de nombreux cas l’uti­li­sa­tion de ces extraits de code pratiques dans les dif­fé­rents projets. Les Web Com­po­nents, des com­po­sants HTML réu­ti­li­sables in­dé­pen­dants du framework, per­met­tent de remédier à la situation. Ce type d’éléments Web stan­dar­di­sés en 2012 est aujourd’hui pris en charge par tous les na­vi­ga­teurs.

Que sont les Web Com­po­nents ?

Les Web Com­po­nents sont des blocs de code englobant la structure interne des éléments HTML incluant le CSS et le Ja­vaS­cript et per­met­tant d’utiliser le code concerné à l’endroit voulu dans les sites Internet et les ap­pli­ca­tions Web. Le concept a été développé par un groupe de travail du World Wide Web Con­sor­tium (W3C) fondé en 1994 par l’inventeur du Web Tim Berners-Lee qui s’est depuis engagé ac­ti­ve­ment pour une stan­dar­di­sa­tion de toutes les tech­no­lo­gies Web élé­men­taires. Le modèle de com­po­sants Web publié en 2012 prévoit à la base les quatre spé­ci­fi­ca­tions suivantes pour la création des com­po­sants HTML utiles :

  • Custom Elements : ensemble d’API Ja­vaS­cript pour la dé­fi­ni­tion des éléments définis par l’uti­li­sa­teur
  • Shadow DOM : ensemble d’API Ja­vaS­cript per­met­tant d’ajouter des éléments DOM
  • ES Modules : des modules per­met­tant l’in­té­gra­tion et la réu­ti­li­sa­tion des documents Ja­vaS­cript
  • HTML Templates : des modèles de balisage qui ne sont pas présentés sur la page affichée et peuvent être utilisés pour servir de base aux éléments définis par l’uti­li­sa­teur

Ce standard de com­po­sants Web est aujourd’hui pris en charge par tous les na­vi­ga­teurs courants. Pour tra­vail­ler avec les codes HTML contenus dans ces éléments, on peut avoir recours à l’ensemble des fra­me­works ou des bi­blio­thèques Ja­vaS­cript utilisant le HTML.

Pourquoi utiliser les Web Com­po­nents ?

Depuis des années, les bi­blio­thèques et les fra­me­works comme Angular ou jQuery font partie des prin­ci­paux outils de travail des dé­ve­lop­peurs Web. Mais aussi pratiques et po­ly­va­lents que soient ces sque­lettes de code per­met­tant d’éco­no­mi­ser beaucoup de travail lors du dé­ve­lop­pe­ment des projets, ils se révèlent souvent rigides lorsqu’il s’agit de les utiliser entre dif­fé­rents projets. Il n’est pas rare que les dé­ve­lop­peurs doivent réécrire ou modifier le code si un chan­ge­ment de framework est prévu. C’est la raison pour laquelle le World Wide Web Con­sor­tium (W3C) a introduit les Web Com­po­nents et ainsi un nouveau cadre pour une réu­ti­li­sa­tion simple et globale des codes HTML, CSS et Ja­vaS­cript.

Étant donné que les éléments Web uni­ver­sels se dis­tin­guent par une syntaxe simple rapide à assimiler, les débutants en pro­gram­ma­tion peuvent également profiter de ce standard du W3C. Au cours de ces dernières années, Google a travaillé au dé­ve­lop­pe­ment et à la mise à dis­po­si­tion des bi­blio­thèques et des modèles pour la pro­gram­ma­tion des Web Com­po­nents en libre accès dans le cadre du « Polymer Project ».

Aperçu des éléments des Web Com­po­nents

Le modèle des Web Com­po­nents est en principe basé sur quatre spé­ci­fi­ca­tions que nous allons voir en détail ci-dessous. Nous vous donnerons par ailleurs plusieurs exemples concrets de spé­ci­fi­ca­tions des Web Com­po­nents.

Custom Elements

Les Custom Elements (éléments définis par l’uti­li­sa­teur) sont des balises HTML englobant le contenu du HTML y compris les ins­truc­tions et les scripts CSS. Ils sont déclarés dans le Cus­to­mE­le­men­tRe­gis­try. Leurs prin­ci­pales ca­rac­té­ris­tiques sont les suivantes :

  • Ils se terminent par une balise fermante.
  • Leur nom est un String DOM et contient toujours un tiret.
  • Son nom peut ap­pa­raître une seule fois dans le Cus­to­mE­le­men­tRe­gis­try.

Pour créer un Custom Element, vous aurez besoin de Ja­vaS­cript et de la méthode define. L’exemple de Web Com­po­nents suivant montre un Custom Element per­met­tant d’intégrer un bouton in­di­vi­duel :

customElements.define('mon-bouton', Monbouton, { extends: 'p' });

Le code suivant suffit alors pour utiliser cet élément dans une ap­pli­ca­tion Web :

<mon-bouton></mon-bouton>

Shadow DOM

La prin­ci­pale propriété des Web Com­po­nents est leur capacité à englober des éléments HTML. L’API Shadow DOM vous permet de joindre des arbres DOM cachés à un arbre de documents. Dans ce cadre, seule la balise HTML du Shadow DOM est visible. Vous pouvez ainsi compléter le DOM caché avec des éléments HTML sans avoir à modifier à chaque fois le DOM principal. Vous trouverez de plus amples in­for­ma­tions sur cette technique ainsi que des exemples concrets d’ap­pli­ca­tion dans notre article sur Shadow Dom.

ES Modules

Les ES Modules sont des modules exportant des objets, des fonc­tion­na­li­tés ou des variables depuis un fichier Ja­vaS­cript. Cette propriété permet de diviser des variables en groupes per­ti­nents au sein d’un même fichier et de les ré­fé­ren­cer. Il existe à l’heure actuelle deux systèmes de modules ES. Alors que CommonJS faisait à l’origine partie de Node.JS, le nouveau système est inclus par défaut dans Ja­vaS­cript ES6.

Afin d’exporter une fonc­tion­na­lité depuis une bi­blio­thèque Ja­vaS­cript, utilisez la méthode export. Dans cet exemple, vous ex­por­te­rez une fonction qui restitue deux fois une chaîne de ca­rac­tères saisie.

// ? lib.bib1
export const repete = (string) => `${string} ${string}`;
}

Import vous permet à présent d’appeler la fonc­tion­na­lité exportée aussi souvent que souhaité.

main.mjs
import {repete} from './lib.mon';
repete ('Bonjour');
// → 'Bonjour Bonjour'

HTML Templates

Un HTML Template est un modèle pour les fichiers HTML. Les éléments contenus restent inactifs et non affichés jusqu’à ce qu’ils soient ex­pli­ci­te­ment appelés. Grâce à cette propriété, ils n’ont aucun effet négatif sur le temps de char­ge­ment d’un site Internet. Par con­sé­quent, ils cons­ti­tuent une al­ter­na­tive per­ti­nente aux méthodes Ja­vaS­cript ha­bi­tuelles.

La balise <template> vous permet de définir un modèle HTML. Dans l’exemple suivant, vous allez créer un modèle intitulé « Mon élément ».

<template id="mon-element">
<p>Mon élément</p>
</template>

Pour utiliser le modèle dans un site Internet, appelez-le avec les méthodes Ja­vaS­cript ge­tE­le­ment­byId et content et joignez-le au DOM.

let template = document.getElementById('mon-element');
let templateContent = template.content;
document.body.appendChild(templateContent);

Comment puis-je utiliser les Web Com­po­nents ?

Les exemples de Web Com­po­nents présentés fonc­tion­nent uni­que­ment lorsque vous combinez ensemble les dif­fé­rents éléments du modèle de Web Com­po­nents. Le schéma suivant présente la méthode à suivre de façon sim­pli­fiée :

  1. Générez une classe ou une fonction Ja­vaS­cript ou exportez-la depuis un fichier Ja­vaS­cript existant à l’aide d’ES Modules.
  2. Déclarez votre nouveau Custom Element avec la méthode Cus­to­mE­le­men­tRe­gis­try.define().
  3. Si cela est né­ces­saire et souhaité, joignez un Shadow DOM caché afin d’ajouter des éléments enfants à votre Custom Element.
  4. Dé­fi­nis­sez un modèle HTML avec les balises <template> et <slot>.
  5. Utilisez le Custom Element généré dans votre site Internet comme un élément HTML habituel.

Le tutoriel suivant vous explique en toute sim­pli­cité comment débuter dans la pro­gram­ma­tion de Web Com­po­nents :

mTNdTcwK3MM.jpg Pour afficher cette vidéo, des cookies de tiers sont nécessaires. Vous pouvez consulter et modifier vos paramètres de cookies ici.

Com­pa­ti­bi­lité des Web Com­po­nents avec les dif­fé­rentes versions de na­vi­ga­teur

Dans les versions pré­cé­dentes des na­vi­ga­teurs, la com­pa­ti­bi­lité des Web Com­po­nents n’était pas encore dis­po­nible. Aujourd’hui, tous les na­vi­ga­teurs courants sup­por­tent les Custom Elements, les Shadow DOM, les ES Modules et les modèles HTML. Le tableau suivant vous donne un aperçu de la com­pa­ti­bi­lité des dif­fé­rents Web Com­po­nents.

Com­pa­tible ? Firefox Chrome Edge Safari Opera
Custom Elements Oui Oui Oui (à partir de la version 76) Oui Oui
Shadow DOM Oui Oui Oui (à partir de la version 75) Oui Oui
ES Modules Oui Oui Oui Oui Oui
HTML Templates Oui Oui Oui Oui Oui

Bi­blio­thèques, modèles et exemples de Web Com­po­nents

Si vous débutez dans la pro­gram­ma­tion de Web Com­po­nents, vos premiers pas peuvent s’avérer dif­fi­ciles. Sur le Web, vous trouverez toutefois de nom­breuses bi­blio­thèques avec des modèles et des fonc­tion­na­li­tés standard ainsi que des exemples pratiques de Web Com­po­nents qui vous fa­ci­li­te­ront la tâche.

  • Lit Element : une classe de base pour la création de Web Com­po­nents
  • Polymer Project : dans le cadre du projet Polymer, Google a proposé dif­fé­rents outils pour tra­vail­ler avec les Web Com­po­nents – notamment un kit de démarrage per­met­tant de pro­gram­mer des ap­pli­ca­tions avec des Web Com­po­nents, une bi­blio­thèque de modèles HTML pour Ja­vaS­cript ainsi que des éléments prêts à l’emploi très di­ver­si­fiés.
  • Hybrids : met à dis­po­si­tion une bi­blio­thèque UI simple pour la création de Web Com­po­nents
  • Slim.js : une bi­blio­thèque avec des pro­prié­tés étendues pour les Web Com­po­nents utilisant un héritage basé sur les classes de Ja­vaS­cript ES6
Aller au menu principal