Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Les Web components
Vous ĂȘtes ici : Accueil Blog > Articles > HTML
Sommaire de l'article
  1. Les Web components c'est quoi
  2. Le DOM shadow
  3. Les custom elements
  4. Les templates
  5. HTML imports
  6. Les différentes librairies
  7. Aller plus loin

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) :

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 :

HTML


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


JavaScript


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 :

HTML


<custom-element></custom-element>


JavaScript


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 :

CSS


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 :

Un contenu HTML classique

Code :

HTML


<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 :

HTML


<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 :

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 ?

Aller plus loin :

La documentation officielle (EN)

Article sur les web components (EN)

Introduction aux web components (FR) .

Article sur le DOM shadow (EN)

Article sur les custom elements (EN)

Exemple d'utilisation (toogle section)

Vous rencontrez un problĂšme avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page