Maintenant que nous connaissons les templates et que nous avons savons comment maîtriser le Shadow DOM, si on mélangeait les deux ?

Enrichir le DOM avec ses propres éléments

En lisant les articles précédents, certains m'ont dit "Pour faire un template, tu utilises la balise template... pfff... normal quoi !"

Maintenant que je souhaite faire un élément, je vais utiliser quelle balise selon vous ?

<element>

pfff... trop facile !

Et si on utilisait tout ce qu'on a appris jusqu'à maintenant ?

Je veux donc un élément qui possède un template, dont l'implémentation est masquée, dans lequel je pourrais insérer des éléments là où je l'ai défini, avec un style juste pour lui, et avec un peu de comportement si possible.

<element name="x-helloworld" constructor="HelloWorld">
  <template>
    <style>
      /* Le style pour cet élément */
    </style>
    Hello <content></content> ! I'm a custom element !
  </template>
  <script>
    HelloWorld.prototype = {
      sayHello: function(e) {
        //do something
      }
    };
  </script>
</element>

Ce composant est défini dans son propre fichier html

Pour l'utiliser dans sa propre page html, il faut maintenant importer ce fichier en utilisant un nouveau lien de type component puis ensuite utiliser la nouvelle balise disponible <x-helloworld>

<link rel="components" href="x-helloworld.html">
<x-helloworld>Julien</x-helloworld>

Ce composant va donc nous afficher ...

Hello Julien ! I'm a custom element !

Simple mais on imagine facilement toutes les possibilités que cela nous ouvre

L'héritage

Dans l'exemple précédent, j'ai ajouté du comportement à mon élément en fournissant une "API" via la balise <script> interne à mon composant.

Mais lorsque l'on souhaite simplement fournir un nouvel élément basé sur un élément existant du DOM, on peut choisir d'hériter de celui-ci.

<element name="x-superbutton" extends="button" >
  ...
</element>

C'est déjà fini ?

Et oui, un article court mais qui a selon moi le mérite de mettre en valeur les deux précédents.

Mais il nous reste encore une dernière feature intéressante à voir. Comment observer les changements du DOM avec l'API Observer.

Les autres articles de la série sur les WebComponents :