L’API web components en quelques lignes

La tendance voulait il y a encore peu que l’on minimise la durée de rédaction du code, sa complexité ainsi que sa longueur. Force est de reconnaître que la plupart des frameworks JavaScript, tels qu’Angular, React et Vue, ne dérogent pas à la règle.

Pour y parvenir, il a fallu faire évoluer la notion de composants (components), ce qui n'a pas été sans soulever de problème : en effet, chaque framework possède sa propre définition et sa propre utilisation de composants… Que faire, ainsi, si l’on n’a pas besoin d’un framework pour son application, mais que l’on souhaite augmenter le processus de codage tout en réduisant la longueur du code ? Aucune inquiétude, une API web components native a été conçu pour répondre à ce besoin et servir d’outil universel pour la création de composants. 

Qu’est-ce qu’une API web component ? 

Les composants web sont de merveilleux outils sans risque d'obsolescence, synonymes d'expérience utilisateur de grande qualité, sans framework complexe ni étape superflue.   Une API web component est donc un ensemble d’outils permettant de créer des éléments HTML personnalisés et réutilisables, dont la fonction est séparée du code. Elle se compose de trois technologies différentes combinées.

1. Custom Elements

Cette technologie permet aux développeurs de créer de nouvelles balises HTML, de renforcer celles déjà existantes ou d’étendre des composants créés par d’autres développeurs. L’API est la base des composants web. Elle fournit une méthode fondée sur les normes du web afin de créer des composants réutilisables, à partir d’éléments simples en JS/HTML/CSS. Résultat : un code compact, modulaire et largement réutilisable dans les applications.

2. La technologie Shadow DOM

Elle optimise le CSS et le DOM et permet d’intégrer des styles scopés dans la plateforme web. Sans outils ni convention de nomenclature, il est possible de regrouper du CSS avec le balisage, de masquer les détails d’implémentation et de créer des composants autonomes en JavaScript simple. Shadow DOM est pensé pour créer des applications basées sur des composants. Cette technologie apporte donc des solutions à des problèmes courants en développement web : 

  • DOM isolé : le DOM d’un composant est autonome (par exemple, document.querySelector () ne renverra pas les nœuds dans le DOM fantôme des composants). 
  • CSS scopé : la portée du CSS intégré au DOM fantôme est limitée à ce dernier. Les règles de style y restent donc circonscrites tandis que les styles de page ne l’impactent pas. 
  • Composition : conçoit une API déclarative basée sur les balises pour votre composant. 
  • CSS simplifié – DOM scopé : vous pouvez utiliser des sélecteurs CSS simples, des noms d'id/de classe plus génériques sans avoir à vous préoccuper de conflit de nomenclature. 
  • Productivité : considérez les applications comme un assemblage de morceaux de DOM plutôt que comme une seule et même grande page (globale). 

3. Éléments <template> et <slot>

Les éléments  <template> et <slot> vous permettent de créer des modèles de balise qui ne s’affichent pas sur la page web. Ils peuvent être réutilisés de nombreuses fois car ils constituent la structure de base d’un élément personnalisé.    

Étapes d’implémentation d’un web component

En règle générale, l’approche de base pour implémenter un composant web est la suivante : 

  1. Créez une classe ou une fonction dans laquelle vous spécifiez la fonctionnalité de votre composant web. Si vous optez pour une classe, utilisez la syntaxe de classe ECMAScript 2015.
    class MyComponent extends HTMLElement {
      connectedCallback() {
        this.innerHTML = `<h1>Hello world</h1>`;
      }
    }
  2. Enregistrez votre nouvel élément personnalisé à l’aide de la méthode CustomElementRegistry.define(), en indiquant le nom de l’élément à définir, la classe ou la fonction dans laquelle sa fonctionnalité est spécifiée et éventuellement, de quel élément il hérite.
    customElements.define('my-component', MyComponent);
  3. Si nécessaire, reliez un DOM fantôme à l’élément personnalisé à l’aide de la méthode Element.attachShadow(). Ajoutez des éléments enfants, des écouteurs d’événement, etc. au DOM fantôme en utilisant les méthodes DOM courantes.
    <div>
      <div id="example">
        <!-- Pseudo-code used to designate a shadow root -->
        <#shadow-root>
          <style>
          button {
            background: tomato;
            color: white;
          }
          </style>
          <button id="button">This will use the CSS background tomato</button>
        </#shadow-root>
      </div>
      <button id="button">Not tomato</button>
    </div>
    
    const shadowRoot = document.getElementById('example').attachShadow({ mode: 'open' });
    shadowRoot.innerHTML = `<style>
    button {
      color: tomato;
    }
    </style>
    <button id="button">This will use the CSS color tomato <slot></slot></button>`;
  4. Si nécessaire, créez un modèle HTML à l’aide des éléments <template> et <slot>. Utilisez de nouveau les méthodes DOM courantes pour cloner le modèle et le relier à votre DOM fantôme.
    <template id="book-template">
      <li><span class="title"></span> &mdash; <span class="author"></span></li>
    </template>
     
    <ul id="books"></ul>
    const fragment = document.getElementById('book-template');
    const books = [
      { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
      { title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
      { title: 'Catch 22', author: 'Joseph Heller' }
    ];
     
    
    books.forEach(book => {
      // Create an instance of the template content
      const instance = document.importNode(fragment.content, true);
      // Add relevant content to the template
      instance.querySelector('.title').innerHTML = book.title;
      instance.querySelector('.author').innerHTML = book.author;
      // Append the instance ot the DOM
      document.getElementById('books').appendChild(instance);
    });
  5. Utilisez votre élément personnalisé où vous voulez sur votre page, comme vous le feriez pour n’importe quel élément HTML courant. 
<my-component></my-component>

Voici un aperçu de ce que peut faire et résoudre une API web components. Cet outil très puissant vous permettra de créer un code modulaire et réutilisable, tout en restant très performant. Les développeurs ne devraient pas avoir peur de s’en servir car il s’agit d’une API standard qui peut facilement être intégrée à n’importer quel framework basé sur des composants.