Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

4. Les templates HTML

Un template HTML permet de déclarer des petits morceaux de HTML qui ne seront pas mis en forme lors du chargement de la page, mais qui pourront être copiés, complétés, puis insérés dans le document grâce au JavaScript : on pourrait parler de module HTML. Ce concept de découpe en module existe déjà beaucoup côté serveur (JavaEE, .NET, Symfony, Django…) mais HTML propose désormais un mécanisme similaire. On peut donc créer de petits éléments de contenu HTML pouvant être réutilisé dans différents endroit de notre application.

Le contenu d’un template HTML est tout de même parsé pendant le chargement de la page, afin de s’assurer qu’il soit valide.

Créons sans plus tarder un template HTML, qui a pour objectif d’afficher un héros. Pour cela nous utilisons la balise <template> dédiée :

<template id="super-heros"> 
 <style> 
 h1 { color: green; }; 
</style> 
 <h1>Green Lantern</h1> 
</template>

Vous voyez, il n’y a rien de bien compliqué, nous utilisons simplement la balise dédiée à la création de template HTML : <template>. Pour l’instant, évidemment ce code ne fait rien qui soit visible à l’écran pour l’utilisateur, puisqu’il est destiné à être appelé en JavaScript. Ajoutons donc un script sur notre page afin d’interagir avec notre template HTML :

// On reprend notre élément personnalisé 'super-heros' précédent
customElements.define('super-hero',
 class extends HTMLElement {
  constructor() {
   super();
   let template = document.getElementById('super-hero');
   // On récupère le contenu de notre template :
   let templateContent = template.content;
   // On ajoute le contenu de notre template au DOM de l'ombre
   const shadowRoot = this.attachShadow({mode:'open'})
    .appendChild(templateContent.cloneNode(true));
  }
})

Désormais, dans votre page, vous pouvez utiliser : <super-hero></super-hero>.

Comme vous pouvez le voir, on commence à avoir un système d’encapsulation solide en HTML : composants personnalisésShadow DOM et templates HTML. Si seulement on pouvait déclarer tout ça dans un fichier à part, et qu’il suffirait ensuite d’importer dans notre page web principale, ça serait vraiment la classe !

Attendez, mais… je crois bien que c’est possible avec les imports HTML ! 😉