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.
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 :
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.
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 ».
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.
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 :
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>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.
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'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);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 :
Le tutoriel suivant vous explique en toute simplicité comment débuter dans la programmation de Web Components :
Afin de protéger votre vie privée, la vidéo ne se chargera qu'après votre clic.
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 |
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.
Bootstrap est le framework le plus populaire pour créer des interfaces Web hautement performantes. Il est composé d’une collection de composants HTML, CSS et JavaScript, publiés par Twitter en 2011, sous la licence libre MIT. Il contient en outre une gamme d’extensions, d’interfaces pour les systèmes de gestion de contenu, et des thèmes préconstruits. Mais il existe aussi des alternatives à...
Vous souhaitez apprendre un langage de programmation Web ? La première chose à faire est de vous concentrer sur un langage en particulier. Il existe des centaines de langages, mais ils ne conviennent pas tous pour développer des sites Internet. Pour vous aider à prendre votre décision afin de pouvoir vous concentrer sur votre projet, voici une brève présentation des langages de programmation...
CSS est l’un des langages les plus importants du Web. Toutefois, travailler avec un langage de feuille de style est souvent compliqué. C’est pourquoi de nombreux développeurs préfèrent utiliser le langage dynamique de génération Less. Ce préprocesseur pour CSS ne facilite pas seulement l’écriture du code des feuilles de style, mais offre d’autres fonctionnalités comme les variables, des fonctions...
Le reverse engineering software permet de cerner et de comprendre le fonctionnement et la structure d'un logiciel. En réalisant le « développement inversé » d’un logiciel et en remontant au code source, on est en mesure d’identifier les éventuels messages d’erreurs, mais aussi d’analyser les logiciels des concurrents. Le reverse engineering (l’ingénierie inversée) est donc utile à beaucoup de...
Les sites Web et les applications sont en constante évolution. Il n’est pas rare que de nouvelles fonctionnalités promettent un site Web de meilleure qualité, plus sécurisé ou plus performant, raison pour laquelle leur implémentation relève souvent de la simple formalité. De nombreux navigateurs sont néanmoins à la traîne en ce qui concerne la prise en charge des nouvelles technologies Web. Ce...
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
Voir les packsAvec IONOS, faites-vous accompagner pour créer votre site, vendre en ligne et être bien référencé.
Lancez-vous facilement sur Internet !
