L'utilisation de modèles peut aider à modulariser et à réutiliser le code HTML sur un site Web. En définissant des modèles qui encapsulent le contenu HTML fréquemment utilisé, nous pouvons réduire la duplication de code et faciliter la mise à jour. Le modèle est généralement utilisé avec des éléments personnalisés. Lorsque vous créez un élément personnalisé avec le shadow DOM, le shadow DOM est créé dynamiquement et existe sous la forme d'une arborescence DOM encapsulée dans l'élément personnalisé.

DOM fantôme

Shadow DOM est une autre longue histoire, je ne vais pas entrer dans les détails à ce sujet, vous pouvez vous référer à MDN Web Docs

" Shadow DOM permet d'attacher des arbres DOM cachés à des éléments de l'arbre DOM normal - cet arbre DOM fantôme commence par une racine fantôme, sous laquelle vous pouvez attacher n'importe quel élément, de la même manière que le DOM normal. "

« Vous pouvez attacher une racine fantôme à n'importe quel élément à l'aide de la méthode Element.attachShadow() . Cela prend comme paramètre un objet d'options qui contient une option — mode — avec une valeur ouverte ou fermée »

Utilisation du modèle

Tout d'abord, utilisons un modèle pour afficher dans un format spécifique.

Par exemple, nous pouvons avoir une liste d'images extraites d'une API que nous voulons afficher dans un format spécifique, nous pouvons définir un modèle et utiliser JavaScript pour remplir le modèle avec des données et l'ajouter au DOM.

Nous récupérons 10 images aléatoires à partir de l'API à l'aide d'une requête de récupération. Pour chaque élément de la réponse, nous clonons l' item-template et définissons src , textContent et ajoutons l'instance de modèle clonée au container .

<template id="item-template">
  <div class="item">
    <img src="" alt="Item image">
    <h2></h2>
    <p></p>
  </div>
</template>
const catTemplate = document.getElementById('item-template');
const catContainer = document.getElementById('container');
const apiKey = 'live_g2TlRXkZBAczbt1TkDyGIjgWk2Yd1wHzR7NahHoqdHGLa0bVho0uKmSl8u9otL1v';

fetch(`https://api.thecatapi.com/v1/images/search?limit=10`, {
  headers: {
    'x-api-key': apiKey
  }
})
  .then(response => response.json())
  .then(data => {
    data.forEach(cat => {
      const catInstance = catTemplate.content.cloneNode(true);
      catInstance.querySelector('img').src = cat.url;
      catInstance.querySelector('h2').textContent = cat.id;
      catInstance.querySelector('p').textContent = `Width: ${cat.width} Height: ${cat.height}`;
      catContainer.appendChild(catInstance);
    });
  })
  .catch(error => {
    console.error('Error fetching cat images:', error);
  });

Maintenant que nous avons rempli le conteneur avec 10 images de chat, nous souhaitons ajouter des fonctionnalités interactives à chaque image. Nous voulons ajouter deux boutons sur chaque image. Nous pouvons créer un autre modèle et l'imbriquer dans le item-template .

<template id="item-template">
  <div class="item">
    <img src="" alt="Item image">
    <h2></h2>
    <p></p>
    <button-group></button-group>
  </div>
</template>

<template id="button-template">
  <button class="share-btn">Share</button>
  <button class="favorite-btn">Favorite</button>
</template>

Le modèle et les éléments personnalisés apparaissent généralement ensemble.

Sans définir un élément personnalisé (qui provient ici du modèle en utilisant document.getElementById('id-name').content ), le modèle ne sera pas rendu.

Dans cet exemple, nous définissons un élément personnalisé appelé button-group qui encapsule le bouton-template. Nous ajoutons ensuite l' élément button-group au modèle d'élément comme mentionné ci-dessus et l'utilisons dans la boucle qui remplit le conteneur avec des éléments de l'API.

class ButtonGroup extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById('button-template');
      const shadowRoot = this.attachShadow({mode: 'open'});
      shadowRoot.appendChild(template.content.cloneNode(true));
      shadowRoot.querySelector('.share-btn').addEventListener('click', () => {
        console.log('Share button clicked');
      });
      shadowRoot.querySelector('.favorite-btn').addEventListener('click', () => {
        console.log('Favorite button clicked');
      });
    }
  }
  
customElements.define('button-group', ButtonGroup);

Comme nous l'avons mentionné ci-dessus, un modèle est utilisé pour définir la structure et le style d'un élément personnalisé, mais vous souhaiterez peut-être personnaliser le contenu de l'élément personnalisé sans modifier le modèle lui-même. C'est là que l' élément slot devient pratique. Il sert d'espace réservé dans le modèle, vous permettant de transmettre le contenu du document principal dans l'élément personnalisé, en ajustant efficacement les données dans le modèle cloné.

<template id="button-template">
    <button class="share-btn">Share</button>
    <button class="favorite-btn">Favorite</button>
    <slot name="cat">
        <legend>meow!</legend>
    </slot>
</template>

Cependant, nous pourrions éditer "miaou!" sans changer le bouton-template , à la place, nous pourrions changer le contenu qui a l'emplacement avec le même attribut de nom, ici il est dans item-template et nous le changeons en "miaou miaou", alors l'image montrera "miaou miaou" .

<template id="item-template">
    <div class="item">
        <img src="" alt="Item image">
        <h2></h2>
        <p></p>
        <button-group>
            <p slot="cat">meow meow</p>
        </button-group>
    </div>
</template>

      
                

                    
                    
                
            

Réseau de développeurs Mozilla. (sd). Utilisation du DOM fantôme. Documents Web MDN.https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM

web.dev. (sd). Modèle, emplacement et ombre. web.dev.https://web.dev/learn/html/template/

Dépôt de l'oeuvre :

https://github.com/Blurmilk/579-presentation

Page déployée :

https://blurmilk.github.io/579-presentation/