Web Components além do Polymer (beyond Polymer)

Web Components Além do Polymer

-6*;"6(6450 * Developer +LuizAugustoDev @lulzaugusto luizaugusto.com

Custom Elements Shadow DOM Templates HTML Imports

<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);

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 });

Shadow DOM var MyElementPrototype = Object.create(HTMLElement.prototype); MyElementPrototype.createdCallback = function()
{ this.innerHTML = 'Oi galera do GDG.'; }; var MyElement = document.registerElement('my-‐element', { prototype: MyElementPrototype }); <body> <my-‐element></my-‐element> </body> index.html <body> <my-‐element> Oi galera do GDG. </my-‐element> </body>

Shadow DOM <body> <my-‐element>
#shadow-‐root Oi galera do GDG. </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 = 'Oi galera do GDG.'; }; var MyElement = document.registerElement('my-‐element', { prototype: MyElementPrototype });

Templates <template id="template"> Oi galera do
GDG. </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 });

HTML Imports <link rel="import" href="my-‐element.html">

http://senta.la/1p3af Reunindo os conceitos http://senta.la/1p3ah

Resources https://github.com/webcomponents/element-‐boilerplate https://github.com/webcomponents/hello-‐world-‐element

Obrigado

Web Components além do Polymer (beyond Polymer)

Web Components além do Polymer (beyond Polymer)

Luiz Augusto

More Decks by Luiz Augusto

Other Decks in Programming

Featured

Transcript