Fondations des WC - Les 4 specs

Dans cette article, nous allons nous intéresser aux fondations des composants web. Cela permettra de comprendre à la fois leur raison d’être et aussi comment ils sont construits.

Nous utiliserons des exemples simples et n'utiliserons pas de polyfill. Pour tester les bouts de code de cet article, le navigateur Google Chrome est le plus approprié.

Pour rappel, les spécifications des Web Components concernent :

  1. Les Templates : Permettent la réutilisation de fragments de code à l'aide de la balise <template>
  2. Le Shadow DOM : Permet l'encapsulation de sous-arbres DOM dans un élément hôte donnée.
  3. Les Custom Elements : Permettent la création et l'enregistrement de nouveaux éléments HTML
  4. Les Imports : Permettent l'importation de contenus dans un document HTML

Templates, Shadow DOM, Custom Elements et Imports à la fois.

Nous allons créer un composant web facilement réutilisable. Le but étant de montrer l'utilisation des quatre spécifications ensemble.

Le composant sera créé dans un fichier externe que nous allons importer lors du besoin. Ce composant peut à son tour utiliser d'autres composant en les important.

Supposons qu'on veuille créer un nouveau élément nommé <az-element>, voici un exemple de page HTML consommant cet élément :

HTML (index.html)

  1. <!doctype html>
  2. <html lang="fr">
  3.     <meta charset="UTF-8">
  4.     <title>Totale</title>
  5.     <link rel="import" href="az-element.html">
  6. </head>
  7.     <az-element></az-element>
  8. </body>
  9. </html>

Nous avons vu dans l'article précédent que le contenu importé par la balise <link rel="import"> reste inerte tant qu'on l'a pas utilisé. Nous avons vu aussi que les scripts javascript importés sont interprétés au moment du chargement. Nous allons donc utiliser une fonction à exécution immédiate (IIFE) pour enregistrer notre élément.

Code du composant dans le fichier az-element.html

HTML

  1. <template id="tmpl">
  2.     <style>
  3.         .outer {
  4.             display: inline-block;
  5.             border: 1px dashed red;
  6.             padding: 10px;
  7.             font-size: 2em;
  8.         }
  9.     </style>
  10.     <div class="outer">
  11.         <h2>Je suis un élément personnalisé</h2>
  12.         <content></content>
  13.     </div>
  14. </template>

Javascript

  1. <script>
  2.     (function() {
  3.         var imDoc = document.currentScript.ownerDocument;
  4.         var azProto = Object.create( HTMLElement.prototype );
  5.         azProto.createdCallback = function () {
  6.             var tmpl = imDoc.querySelector( '#tmpl' ).content;
  7.             var clone = imDoc.importNode( tmpl, true );
  8.             this.createShadowRoot().appendChild( clone );
  9.         };
  10.         imDoc.registerElement( 'az-element', {prototype: azProto} );
  11.     })();
  12. </script>

La fonction anonyme javascript ci-dessus, s'exécute aussitôt que le fichier az-element.html est chargé. Dans la deuxième ligne, on récupère la référence du document qui a importé le fichier, ensuite on configure l'élément à sa création dans la callback createdCallback et enfin on enregistre l'élément dans le document.

Notez que la définition de l'élément est faite à l'intérieur d'un template et que le contenu de celui-ci est encapsulé dans le Shadow DOM de l'élément nouvellement créé.

Conclusion

L’avènement des Web Components va être un tournant décisif pour tout les acteurs du Web. Les développeurs de tout horizons devraient s'aligner avec ces nouvelles approches cela leur fera gagner du temps et rendra leurs codes plus cohérents et réutilisables.

Toutes les spécifications relatives aux Web Componenets n'ont pas encore atteint la phase de recommandation, mais ça bouillonne au niveau du W3C et du WHATWG.

En attendant, les grand players du Web comme Google se sont déjà mis à l’œuvre, Il suffit de voir l'évolution de leurs produits pour comprendre que la révolution est imminente.