Guillaume Duverger - Développement & Graphisme - Blog

Dernière mise à jour : avril 2021

Les Web components c'est quoi ?

Les composants web permettent de créer des balises HTML personnalisées, réutilisables et séparées de l'application web principale.

L'idée n'est pas nouvelle, puisque déjà la librarie JQuery avec ses plugins allaient en ce sens. Seulement, il y avait un problème de taille, puisque un conflit pouvait survenir entre différents plugins. Ce qui n'est pas le cas avec les web components puisqu'ils font partie du navigateur (pour peu qu'il les supporte ).

Les composants web s'articulent autour de plusieurs interfaces de programmation du W3C (projet datant de 2011 !), qui peuvent être utilisées séparément (et sans forcément de librairies externes) :

• -DOM shadow
• -Custom elements
• -HTML templates
• -HTML imports

Nous allons dans cet article nous intéresser à ces notions.

Le DOM shadow

Le DOM shadow permet de créer un DOM propre à un élément, qui est donc indépendant du DOM principal et ne peut être accessible.

Prenons un exemple simple. Nous créons une balise <div> avec un identifiant que l'on va reporter dans un script.

Code :

<div id="webComponents"></div>

let shadowroot = document.getElementById("webComponents").createShadowRoot();//on va créer notre dom shadow

let contenu = document.createElement("h1");//on va créer notre élément à l'intérieur du dom shadow

contenu.innerText = "Les web components c'est quoi ?";
shadowroot.appendChild(contenu);

Le résultat ci-dessous :

Remarque : la fonction .createShadowRoot() a été dépréciée et remplacée par .attachShadow().

Je vous invite à faire un clic droit, puis "inspecter". Vous remarquerez alors dans la console l'apparition de #shadow-root, qui n'est autre que le DOM de notre div, et dans lequel on voit la balise <h1> que l'on a créée dans notre script.

Par ailleurs, la spécification Shadow DOM a introduit de nouveaux sélecteurs CSS, qui ne fonctionnent qu'avec le DOM shadow.

La pseudo-classe :host, qui fait partie de CSS Scoping Module Level 1 , permet de sélectionner l’élément host (élément qui contient le shadow root). La pseudo-classe de fonction :host() permet de cibler un sélecteur, tandis que la pseudo-classe de fonction :host-context() s'utilise dans le cas où le sélecteur fourni en argument (.selecteur) correspond à l'ancêtre de l'hôte selon l'arborescence du DOM.

Vous pouvez voir un exemple d'utilisation de ces pseudo-classes sur cette page .

Le pseudo-élément ::shadow, permet de sélectionner un élément dans le propre DOM Shadow d’un élément.

Le combinateur /deep/ est similaire à ::shadow, mais en plus puissant. Il permet de sélectionner des éléments, qu’ils fassent partie du DOM shadow ou non. Il peut se révéler utile pour les éléments remplacés (élément video par exemple). Vous pouvez voir un exemple ici .

La pseudo-classe :unresolved pour les éléments de style par defaut.

Les custom elements

Les custom elements sont tout simplement des balises avec un nom personnalisé, ce qui signifie que vous pouvez nommer vos balises comme bon vous semble (en rapport avec votre contenu de préférence), sachant que des termes réservés existent (<template>, <content> et <shadow>).

Pour que notre balise soit reconnue comme étant une balise classique au sein du DOM, il nous faut utiliser dans un script la fonction document.registerElement (remplacée depuis par la fonction customElements.define()) avec un attribut personnalisé, chaque attribut pouvant avoir une API personnalisée.

Un exemple ci-dessous :

Code :

<custom-element></custom-element>

class CustomElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Exemple des composants web</h1>`;
  }
}
    
customElements.define('custom-element', CustomElement);

Il est tout à fait possible de styler cet élément avec CSS :

Code :

custom-element{

color: red

}

HTML templates

L'élément HTML template permet de stocker du contenu côté client sans que celui-ci soit affiché au chargement de la page mais qui peut être cloné puis inséré au moment voulu dans le DOM avec JavaScript.

En outre, l’API Template HTML5 permet de simplifier l’écriture de la structure HTML interne d’un composant. Tout balisage HTML peut être spécifié à l'intérieur de la balise <template>. Egalement, l'élément template peut s'insérer à l'intérieur de certaines balises.

Dans la mesure où cet élément n'est pas interprêté par le moteur de rendu, il faut l'activer via JavaScript.

Ci-dessous, un exemple tiré de cette page :

Code :

<template id="example">
<p>Contenu à l'intérieur de l'élément template.</p>
</template>
<div id="target">
<p>Un contenu HTML classique</p>
</div>

HTML imports

Les importations permettent d'inclure des documents HTML dans d'autres documents HTML. Combinées avec l'élément template vu plus haut, on obtient des pages web dynamiques !

Pour déclarer une importation, il faut utiliser l'élément link placé dans l'entête du document entre les balises <head></head>. On veillera à placer l'attribut rel avec la valeur import comme suit:

Code :

<head>
<link rel="import" href="template.html">
</head>	

Chaque fichier HTML importé est chargé par le navigateur qui met en réserve le fichier dans l'attente d'être affiché avec JavaScript :

let contenu = document.getElementById('monId').import;

Il existe un très bon tutoriel qui vous montre pas à pas comment créer un blog dynamique.

Les différentes librairies

GOOGLE POLYMER

X-TAG

BOSONIC

SkateJS

Slim.js

En conclusion, il est encore trop tôt pour utiliser cette nouvelle technologie (qui pourtant commence à dater), à moins d'utiliser un polyfill. Mais ne serait-ce pas contre-productif ?