Le terme Web Component regroupe trois technologies natives :
- Les Custom Elements
- Le Shadow DOM
- Les éléments HTML
<template>et<slot>
Ces trois concepts seront introduits successivements par les trois exercices.
Les Custom Elements permettent de créer des éléments HTML sur mesure et de définir leur contenu et leur comportement.
- Créez un fichier
index.htmlavec une structure basique. - Créez un fichier
src/current-time.jset importez-le dans la balise<head>du fichier HTML. Utilisez l'attributdeferpour ne pas bloquer le parsing du fichier HTML. - Ouvrez votre application dans le navigateur grâce à l'extension Live Server de VSCode et vérifiez le bon lien entre les deux fichiers.
Nous allons créer un composant affichant la date actuelle :
- Dans le fichier JavaScript, déclarez une classe
CurrentTimequi étend la classe nativeHTMLElement. - À la suite de la classe, grâce à la fonction
customElements.define("nom-du-tag", NomDeLaClasse), associez votre classe au tagcurrent-time. - Utilisez le tag
current-timedans votre fichier HTML. - Déclarez la méthode
connectedCallbackdans votre classe. Au sein de cette méthode, utilisezthis.innerHTMLpour ajouter du contenu à votre tag.
Le contenu doit s'afficher dans votre page.
- Remplacez votre contenu de test par le vrai contenu, soit une div de classe
currentTime, contenant :- un élément
<p>de classecurrentTime__titleet contenant la chaîneHeure locale; - un élément
<time>de classecurrentTime__time, vide.
- un élément
- À la suite de cette opération, gardez une référence vers l'élément
<time>dans la classe, nous en aurons besoin. Trouvez l'élément grâce àthis.querySelectoret stockez le dansthis.$time. - Insérez la date dans l'élément
<time>. Elle peut être obtenue grâce à l'expressionnew Date().toLocaleString(). - La date doit désormais s'afficher. Ajoutez quelques styles grâce à un fichier CSS inclus dans votre fichier principal. C'est important, le style.
On souhaite que la date se mette à jour à chaque seconde.
- Trouvez un moyen pour mettre à jour le contenu de
<time>à chaque seconde (sans rafraîchir l'intégralité du contenu !) - En utilisant la fonction
disconnectedCallback, assurez-vous que la fonction de mise à jour ne sera plus appelée "dans le vide" après la disparition du composant. Pour le vérifier, vous pouvez supprimer le composant directement dans l'inspecteur et observer les effets (à l'aide deconsole.logpar exemple).
Notre composant va désormais être capable d'accueillir un paramètre format. Si ce format vaut utc, on souhaite afficher l'heure UTC. Pour toute autre valeur, y compris l'absence de valeur, on reste sur le comportement initial (heure locale).
- Dans votre HTML, ajoutez un deuxième appel au composant en passant cette fois-ci l'attribut
format="utc". Un deuxième composant (pour l'instant identique) apparaît. - Déclarez les attributs pris en compte par votre composant grâce à la méthode
static get observedAttributes(), qui doit retourner un tableau contenant le nom des attributs concernés. - Grâce à la méthode
attributeChangedCallback(name, oldVal, newVal), lorsque vous détectez un changement sur l'attributformat, stockez sa valeur dansthis.format. - Dans votre fonction de rendu, utilisez
this.formatpour adapter :- le titre du composant (
Heure UTCouHeure locale) - le contenu de l'élément
<time>(new Date().toUTCString()ounew Date().toLocaleString())
- le titre du composant (
Les deux composants ont désormais un comportement différent !
Que se passe t-il lorsque vous inspectez le DOM et ajoutez / retirez manuellement l'attribut format="utc" ? Si votre composant ne se met pas à jour, il vous manque encore un tout petit peu de bricolage...