Fondations des WC - Imports

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

Les Imports

C'est quoi ?

L'utilisation de la balise link pour inclure dans la page des feuilles de styles est très connue. Pour les styles l'attribut rel est positionné à stylesheet. Pour importer des fragments HTML, il suffit de positionner cet attribut à import.

A la différence des feuilles de styles, les fragments importés restent inertes tant qu'on les a pas inséré quelque part dans le document.

Importation d'un fichier

HTML (element.html)

  1. <!-- fichier element.html -->
  2. <ul>
  3.   <li>One</li>
  4.   <li>Two</li>
  5.   <li>Three</li>
  6. </ul>

HTML (index.html)

  1. <!-- fichier index.html -->
  2. <link rel="import" href="element.html" id="elm">

Dans la page index.html, le fichier element.html sera chargé et n'aura aucun effet tant qu'on n'a pas extrait et utilisé son contenu.

Utilisation du contenu du fichier importé

On utilise la propriété content pour extraire le fragment contenu dans le fichier.

Javascript

  1. var content = document.querySelector('#elm').import;
  2. // content est un fragment DOM
  3. var ul = content.querySelector('ul');
  4. document.body.appendChild(ul);

Comme résultat, nous verrons les éléments de la liste dans le document index.html.

Et si le fichier element.html contient une feuille de style ou un script javascript ?

Exemple

Supposons qu'on a la configuration suivante :

HTML (index.html)

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

HTML (element.html)

  1. <link rel="stylesheet" href="element.css">
  2. <script src="element.js"></script>
  3. <ul>
  4.     <li>One</li>
  5.     <li>Two</li>
  6.     <li>Three</li>
  7. </ul>

CSS (element.css)

  1. h2 {
  2.     color: orangered;
  3. }
  4. li {
  5.     border: 1px solid gray;
  6.     padding: 4px;
  7.     margin: 4px;
  8.     display: inline-block;
  9.     list-style: none;
  10. }

Javascript (element.js)

  1. var a = 23;
  2. function rnd(n){
  3.   return Math.random()*n;
  4. }

Résultat

Conclusion

Avec le nouveau standard, la création des éléments personnalisés devient très simple. Fini le copier/coller du code, le développeur pourra créer ou réutiliser des éléments de manière simple et élégante.

En utilsant les Templates et le Shadow DOM, les éléments vont devenir de vrais composants encapsulant l'essentiel de leur code et présentation, ce qui facilitera leur utilisation et réutilisation.

L'article suivant va compléter la chaine et montrer comment mettre ces composants dans des fichiers séparés et les importer au moment du besoin.