El Noguer

HTML té moltes etiquetes per poder definir semànticament la pàgina (header,footer,section,article)  i moltes per definir els diversos tipus de camps (select,input,button)  que composen la interfície gràfica de la pàgina web.

Però què passa quan es vol posar a la pàgina un component que no està definit al HTML5? Aleshores, la manera més senzilla fins ara era utilitzant una biblioteca de components com  jQuery-ui  o Dojo.  Aquestes solucions són molt vàlides però, per desgràcia cada solució requereix afegir codi estrany al nostre html, classes, atributs data, …

Ara amb HTML5 hi haurà una possibilitat de fer-ho d’una manera més natural, utilitzant etiquetes.

Per exemple a continuació es defineix un nou element <x-foo-from-template> … </x-foo-from-template> :

<template id="sdtemplate">
     <style>
          p { color: orange; }
     </style>
     <p>I'm in Shadow DOM. My markup was stamped from a <template>.</p>
</template>

<script>
  var proto = Object.create(HTMLElement.prototype, 
              { 
                createdCallback: 
                {
                  value: function() 
                         {
                           var t = document.querySelector('#sdtemplate');
                           var clone = document.importNode(t.content, true);
                           this.createShadowRoot().appendChild(clone);
                         }
                 }
              });

    document.registerElement('x-foo-from-template', {prototype: proto});
</script>

Més informació:  Custom Elements: defining new elements in HTML – HTML5 Rocks.

Tweet