Fondations des WC - Les Custom Elements

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 Custom Elements

C'est quoi ?

La spécification des Custom Elements décrit comment ajouter de nouveaux éléments ou étendre des éléments standards du HTML.

Les noms des nouveaux éléments doivent être en minuscules et comporter le caractère - (moins). Cela permet de les distinguer par rapport aux élément natifs du HTML.

Création d'un élément

Pour ajouter un nouveau élément, on fait appel à la méthode document.registerElement().

Javascript

  1. // La méthode regiterElement retourne le constructeur de l'élément.
  2. var AzElement = document.registerElement('az-element');

On peut ensuite, l'utiliser de manière déclarative :

HTML

  1. <az-element></az-element>

Ou de manière impérative :

Javascript

  1. var az = new AzElement();
  2. // ou de manière standard
  3. var az = document.createElement('az-element');
  4. // Insertion du nouveau élément dans le DOM
  5. document.body.appendChild(az);

Maintenant, notre nouveau élément existe mais il n'ajoute aucune fonctionnalité.

Par défaut, l'élément nouvellement créé hérite de HTMLElement. La méthode registerElement() a un deuxième argument facultatif. Il s'agit du prototype de l'objet hérité. Le code ci-haut est equivalent à :

Javascript

  1. var AzElement = document.registerElement('az-element', {
  2.           prototype: Object.create(HTMLElement.prototype)
  3. });

Cycle de vie d'un élément

Les éléments sont gérés par le navigateur, et à certaines points du cycle de vie d'un élément, le navigateur appelle des callback que le développeur peut personnaliser. Voici la liste des quatre callback :

Nom de la callback Moment d'appel de la callback
createdCallback() Au moment de la création
attachedCallback() L'élément vient d’être inséré dans le DOM du document.
detachedCallback() L'élément vient d’être enlevé du DOM du document.
attributeChangedCallback(attrName, oldValue, newValue) Un attribut vient d’être ajouté, supprimé ou modifié

Créons un élément qui fait quelque chose.

HTML

  1. <!DOCTYPE html>
  2.     <meta charset="UTF-8">
  3.     <title>Circle</title>
  4.     <style>
  5.         az-circle {
  6.             position: absolute;
  7.         }
  8.     </style>
  9. </head>
  10. <script src="elemnet.js"></script>
  11.  
  12. <az-circle rayon="30" stroke="#700" fill="rgba(200,0,0, 0.5)"></az-circle>
  13. <az-circle rayon="50" stroke="#700" fill="rgba(200,0,0, 0.5)"></az-circle>
  14. <az-circle rayon="70" stroke="#700" fill="rgba(200,0,0, 0.5)"></az-circle>
  15. <az-circle rayon="90" stroke="#700" fill="rgba(200,0,0, 0.5)"></az-circle>
  16. </body>
  17. </html>

Javascript (element.js)

  1.     var protoCircle = Object.create(HTMLElement.prototype);
  2.     protoCircle.createdCallback = function(){
  3.         this.rayon = this.getAttribute('rayon') || 20;
  4.         this.stroke = this.getAttribute('stroke') || 'black';
  5.         this.fill = this.getAttribute('fill') || 'white';
  6.         styleMe(this);
  7.     };
  8.     protoCircle.attributeChangedCallback = function(attr, oldValue, newValue){
  9.         this[attr] = newValue;
  10.         styleMe(this);
  11.     };
  12.     var styleMe = function(me){
  13.         me.style.display =  'block';
  14.         me.style.border =  me.stroke + ' 1px solid';
  15.         me.style.backgroundColor = me.fill;
  16.         me.style.borderRadius = '50%';
  17.         me.style.height = (2 * me.rayon) + 'px';
  18.         me.style.width = (2 * me.rayon) + 'px';
  19.     };
  20.     var AzCircle = document.registerElement('az-circle', {
  21.         prototype : protoCircle
  22.     });

Résultat

On peut aussi créer dynamiquement cet élément avec du Javascript :

Javascript

  1. for (var i=0; i<4; i++){
  2.       var az = document.createElement('az-circle');
  3.       az.setAttribute('rayon', 30 + i*20);
  4.       az.setAttribute('stroke', '#700');
  5.       az.setAttribute('fill', 'rgba(200,0,0, 0.5)');
  6.       document.body.appendChild(az);
  7.   }

Etendre un élément natif

Pour étendre un élément natif HTML, il suffit de passer à la méthode registerElement() dans le deuxième argument un objet comportant le prototype de l'élément qu'on veut étendre et le nom de la balise HTML native dans la clé extends.

Javascript

  1.     var protoRoundedButton = Object.create(HTMLButtonElement.prototype);
  2.     protoRoundedButton.attachedCallback = function(){
  3.         this.style.padding = '10px';
  4.         var r = this.offsetHeight / 2;
  5.         this.style.borderRadius = r + 'px';
  6.         this.style.color = 'orangered';
  7.         this.style.textShadow = '1px 1px 2px #aaf';
  8.         console.log('attached....')
  9.     };
  10.     document.registerElement('rounded-button', {
  11.         prototype: protoRoundedButton,
  12.         extends: 'button'
  13.     });

HTML

  1. <button is="rounded-button">Mon bouton</button>

Résultat

Notez l'utilsation de l'attribut is="rounded-button". On peut aussi créer l'élément de manière impérative, le code suivant donnerait exactement le même résultat :

Javascript

  1.     var rb = document.createElement('button', 'rounded-button');
  2.     rb.textContent = 'Mon bouton';
  3.     document.body.appendChild(rb);

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.

Commentaires

Copyright @ Pioneer Tours annd travels for kodaikanal,

Kodaikanal.

Moreover, you are not a specialist bonus web design template

(pagebin.com) designer.

Definitely imagine that that you stated. Your favourite

justification appeared to be at the web the

easiest factor to keep in mind of. I say to you, I definitely get annoyed whilst other folks think about concerns that they just don't know about.

You managed to hit the nail upon the highest and also outlined out the whole thing without having side-effects , other

folks could take a signal. Will likely be back to get more.

Thank you

Also visit my homepage ... Togel Singapura

four. Preview the recoverable files onn your iphone data recovery discount.

Aftеr looking aat a handful of the blog articles

ߋn your website, І truly appreciate уour way of writing a blog.

I added іt to my bookmark site list аnd ᴡill be

checking bаck іn the near future. Ꮲlease check

օut my website too and tеll mе yoսr opinion.

Ꮇy web blog - t shirt printing