Web Components além do Polymer (beyond Polymer)

Transcript

1. Web Components Além do Polymer
2. -6*;
   "6(6450 *  Developer +LuizAugustoDev   @lulzaugusto   luizaugusto.com
3. !==
4. Custom Elements Shadow DOM Templates HTML Imports
5. <body>          <my-­‐element></my-­‐element>          <my-­‐element></my-­‐element>          <my-­‐element></my-­‐element>   </body> Custom Elements var  MyElementPrototype  =  Object.create(HTMLElement.prototype);   var  MyElement  =  document.registerElement('my-­‐element',  {          prototype:  MyElementPrototype   });   var  element  =  document.createElement('my-­‐element');   var  anotherElement  =  new  MyElement();   document.body.appendChild(element);   document.body.appendChild(anotherElement);
6. Custom Elements var  MyElementPrototype  =  Object.create(HTMLElement.prototype);   MyElementPrototype.createdCallback  =  function()  {};   MyElementPrototype.attachedCallback  =  function()  {};   MyElementPrototype.detachedCallback  =  function()  {};   MyElementPrototype.attributeChangedCallback  =  function(attribute,  oldVal,  newVal)  {};   var  MyElement  =  document.registerElement('my-­‐element',  {          prototype:  MyElementPrototype   });
7. Shadow DOM var  MyElementPrototype  =  Object.create(HTMLElement.prototype);   MyElementPrototype.createdCallback  =  function()  {          this.innerHTML  =  '<p>Oi  galera  do  GDG.</p>';   };   var  MyElement  =  document.registerElement('my-­‐element',  {          prototype:  MyElementPrototype   }); <body>          <my-­‐element></my-­‐element>   </body> index.html <body>          <my-­‐element>                  <p>Oi  galera  do  GDG.</p>          </my-­‐element>   </body>
8. Shadow DOM <body>          <my-­‐element>                  #shadow-­‐root                          <p>Oi  galera  do  GDG.</p>          </my-­‐element>   </body> <body>          <my-­‐element></my-­‐element>   </body> index.html var  MyElementPrototype  =  Object.create(HTMLElement.prototype);   MyElementPrototype.createdCallback  =  function()  {          var  shadow  =  this.createShadowRoot();          shadow.innerHTML  =  '<p>Oi  galera  do  GDG.</p>';   };   var  MyElement  =  document.registerElement('my-­‐element',  {          prototype:  MyElementPrototype   });
9. Templates <template  id="template">          <p>Oi  galera  do  GDG.</p>   </template> var  MyElementPrototype  =  Object.create(HTMLElement.prototype);   MyElementPrototype.createdCallback  =  function()  {          var  shadow  =  this.createShadowRoot();          var  template  =  document.querySelector('template');          var  clone  =  document.importNode(template.content,  true);          shadow.appendChild(clone);   };   var  MyElement  =  document.registerElement('my-­‐element',  {          prototype:  MyElementPrototype   });
10. HTML Imports <link  rel="import"  href="my-­‐element.html">
11. http://senta.la/1p3af Reunindo os conceitos http://senta.la/1p3ah
12. Resources https://github.com/webcomponents/element-­‐boilerplate   https://github.com/webcomponents/hello-­‐world-­‐element
13. Obrigado