Download to read offline
Web components copy
- 1. Web Components Além doPolymer
- 2. LUIZ AUGUSTO * Developer +LuizAugustoDev @lulzaugusto luizaugusto.com
- 3.
- 4.
- 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.
- 12.
- 13.