Avec les frameworks JavaScript tels que React et Angular, les développeurs peuvent définir des éléments Web réutilisables. Ces frameworks utilisent toutefois un autre standard qui empêche dans de nombreux cas l’utilisation de ces extraits de code pratiques dans les différents projets. Les Web Components, des composants HTML réutilisables indépendants du framework, permettent de remédier à la situation. Ce type d’éléments Web standardisés en 2012 est aujourd’hui pris en charge par tous les navigateurs.

Que sont les Web Components ?

Les Web Components sont des blocs de code englobant la structure interne des éléments HTML incluant le CSS et le JavaScript et permettant d’utiliser le code concerné à l’endroit voulu dans les sites Internet et les applications Web. Le concept a été développé par un groupe de travail du World Wide Web Consortium (W3C) fondé en 1994 par l’inventeur du Web Tim Berners-Lee qui s’est depuis engagé activement pour une standardisation de toutes les technologies Web élémentaires. Le modèle de composants Web publié en 2012 prévoit à la base les quatre spécifications suivantes pour la création des composants HTML utiles :

  • Custom Elements : ensemble d’API JavaScript pour la définition des éléments définis par l’utilisateur
  • Shadow DOM : ensemble d’API JavaScript permettant d’ajouter des éléments DOM
  • ES Modules : des modules permettant l’intégration et la réutilisation des documents JavaScript
  • 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’utilisateur

Ce standard de composants Web est aujourd’hui pris en charge par tous les navigateurs courants. Pour travailler avec les codes HTML contenus dans ces éléments, on peut avoir recours à l’ensemble des frameworks ou des bibliothèques JavaScript utilisant le HTML.

Pourquoi utiliser les Web Components ?

Depuis des années, les bibliothèques et les frameworks comme Angular ou jQuery font partie des principaux outils de travail des développeurs Web. Mais aussi pratiques et polyvalents que soient ces squelettes de code permettant d’économiser beaucoup de travail lors du développement des projets, ils se révèlent souvent rigides lorsqu’il s’agit de les utiliser entre différents projets. Il n’est pas rare que les développeurs doivent réécrire ou modifier le code si un changement de framework est prévu. C’est la raison pour laquelle le World Wide Web Consortium (W3C) a introduit les Web Components et ainsi un nouveau cadre pour une réutilisation simple et globale des codes HTML, CSS et JavaScript.

Étant donné que les éléments Web universels se distinguent par une syntaxe simple rapide à assimiler, les débutants en programmation peuvent également profiter de ce standard du W3C. Au cours de ces dernières années, Google a travaillé au développement et à la mise à disposition des bibliothèques et des modèles pour la programmation des Web Components en libre accès dans le cadre du « Polymer Project ».

Aperçu des éléments des Web Components

Le modèle des Web Components est en principe basé sur quatre spécifications que nous allons voir en détail ci-dessous. Nous vous donnerons par ailleurs plusieurs exemples concrets de spécifications des Web Components.

Custom Elements

Les Custom Elements (éléments définis par l’utilisateur) sont des balises HTML englobant le contenu du HTML y compris les instructions et les scripts CSS. Ils sont déclarés dans le CustomElementRegistry. Leurs principales caractéristiques sont les suivantes :

  • Ils se terminent par une balise fermante.
  • Leur nom est un String DOM et contient toujours un tiret.
  • Son nom peut apparaître une seule fois dans le CustomElementRegistry.

Pour créer un Custom Element, vous aurez besoin de JavaScript et de la méthode define. L’exemple de Web Components suivant montre un Custom Element permettant d’intégrer un bouton individuel :

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

Le code suivant suffit alors pour utiliser cet élément dans une application Web :

<mon-bouton></mon-bouton>

Shadow DOM

La principale propriété des Web Components 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 informations sur cette technique ainsi que des exemples concrets d’application dans notre article sur Shadow Dom.

ES Modules

Les ES Modules sont des modules exportant des objets, des fonctionnalités ou des variables depuis un fichier JavaScript. Cette propriété permet de diviser des variables en groupes pertinents au sein d’un même fichier et de les référencer. 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 JavaScript ES6.

Afin d’exporter une fonctionnalité depuis une bibliothèque JavaScript, utilisez la méthode export. Dans cet exemple, vous exporterez une fonction qui restitue deux fois une chaîne de caractères saisie.

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

Import vous permet à présent d’appeler la fonctionnalité 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 explicitement appelés. Grâce à cette propriété, ils n’ont aucun effet négatif sur le temps de chargement d’un site Internet. Par conséquent, ils constituent une alternative pertinente aux méthodes JavaScript habituelles.

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 JavaScript getElementbyId 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 Components ?

Les exemples de Web Components présentés fonctionnent uniquement lorsque vous combinez ensemble les différents éléments du modèle de Web Components. Le schéma suivant présente la méthode à suivre de façon simplifiée :

  1. Générez une classe ou une fonction JavaScript ou exportez-la depuis un fichier JavaScript existant à l’aide d’ES Modules.
  2. Déclarez votre nouveau Custom Element avec la méthode CustomElementRegistry.define().
  3. Si cela est nécessaire et souhaité, joignez un Shadow DOM caché afin d’ajouter des éléments enfants à votre Custom Element.
  4. Définissez 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 simplicité comment débuter dans la programmation de Web Components :

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.

Compatibilité des Web Components avec les différentes versions de navigateur

Dans les versions précédentes des navigateurs, la compatibilité des Web Components n’était pas encore disponible. Aujourd’hui, tous les navigateurs courants supportent les Custom Elements, les Shadow DOM, les ES Modules et les modèles HTML. Le tableau suivant vous donne un aperçu de la compatibilité des différents Web Components.

Compatible ? 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

Bibliothèques, modèles et exemples de Web Components

Si vous débutez dans la programmation de Web Components, vos premiers pas peuvent s’avérer difficiles. Sur le Web, vous trouverez toutefois de nombreuses bibliothèques avec des modèles et des fonctionnalités standard ainsi que des exemples pratiques de Web Components qui vous faciliteront la tâche.

  • Lit Element : une classe de base pour la création de Web Components
  • Polymer Project : dans le cadre du projet Polymer, Google a proposé différents outils pour travailler avec les Web Components – notamment un kit de démarrage permettant de programmer des applications avec des Web Components, une bibliothèque de modèles HTML pour JavaScript ainsi que des éléments prêts à l’emploi très diversifiés.
  • Hybrids : met à disposition une bibliothèque UI simple pour la création de Web Components
  • Slim.js : une bibliothèque avec des propriétés étendues pour les Web Components utilisant un héritage basé sur les classes de JavaScript ES6
Cet article vous a-t-il été utile ?
Aller au menu principal