web components copy
TRANSCRIPT
Web ComponentsAlém do Polymer
!==
Custom ElementsShadow DOM
TemplatesHTML Imports
<body> <my-‐element></my-‐element> <my-‐element></my-‐element> <my-‐element></my-‐element> </body>
Custom Elementsvar 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 DOMvar 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>
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 });
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 });
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