o mágico mundo de web components
DESCRIPTION
Present at beltrao In TechTRANSCRIPT
![Page 1: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/1.jpg)
O Mágico Mundo De
Web Components
@mteusortiz
![Page 2: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/2.jpg)
@mteusortiz/mateusortiz
Front-End Developer
![Page 3: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/3.jpg)
![Page 4: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/4.jpg)
![Page 5: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/5.jpg)
Web Components
![Page 6: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/6.jpg)
HTML5 é o Futuro?
![Page 7: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/7.jpg)
![Page 8: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/8.jpg)
O Futuro
![Page 9: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/9.jpg)
![Page 10: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/10.jpg)
<x-heart>
http://mateusortiz.github.io/x-heart/
![Page 11: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/11.jpg)
![Page 12: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/12.jpg)
Web Components
Shadow DOM
Template
Custom Elements
HTML Imports
Decorators
![Page 13: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/13.jpg)
Custom Elements
![Page 14: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/14.jpg)
Antes com <element>
<element name="x-button" constructor="XBUTTON" attributes="lg sm xs"> <!-- Content --> </element>
![Page 15: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/15.jpg)
Antes com <element>
<element name="x-button" extends="button"> <!-- Content --> </element>
![Page 16: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/16.jpg)
http://goo.gl/GWatuU
![Page 17: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/17.jpg)
com JS<my-widget></my-widget>
var WidgetProto = Object.create(HTMLElement.prototype); !WidgetProto.createdCallback = function() { this.textContent = "BeltraoInTech"; }; !var Widget = document.registerElement('my-widget', { prototype: WidgetProto });
![Page 18: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/18.jpg)
Lifecycle Callbacks
createdCallback();attachedCallback();detachedCallback();attributeChangedCallback();
![Page 19: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/19.jpg)
Funciona no IE6
![Page 20: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/20.jpg)
![Page 21: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/21.jpg)
tpolymer-project.org
![Page 22: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/22.jpg)
tx-tags.org
![Page 23: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/23.jpg)
W3C standards platform polyfills
Template shadow dom HTML ImportsCustom Elements
![Page 24: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/24.jpg)
Com Polymer
<polymer-element name="x-button" attributes="color"> <script> Polymer('x-button', { color: 'red', created: function() { // ... } }); </script> </polymer-element>
![Page 25: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/25.jpg)
Lifecycle Callbacks Polymer
created();
detached();attributeChanged();
attached();
![Page 26: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/26.jpg)
Template
![Page 27: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/27.jpg)
Templates são pedaços
inertes de DOM que podem ser
reutilizados.
![Page 28: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/28.jpg)
# GAMBIARRA
existe vários Templates para server-side e client-side
![Page 29: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/29.jpg)
<template>
![Page 30: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/30.jpg)
como criar?<template> <p>BeltraoInTech...</p> <img src="beltrao.png"/> </template>
![Page 31: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/31.jpg)
como usar?
var tmpl = document.querySelector("#template"); tmpl.content.querySelector("img").src = "dog.gif"; document.body.appendChild(tmpl.content.cloneNode(true));
![Page 32: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/32.jpg)
Shadow DOM
![Page 33: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/33.jpg)
O SHADOW DOM encapsula STYLE e MARCAÇÃO.
![Page 34: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/34.jpg)
<iframe>
![Page 35: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/35.jpg)
Shadow Dom é a mesma tecnologia usada pelos fabricantes de navegadores para implemetar as
tags como <video> e <textarea>.
![Page 36: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/36.jpg)
![Page 37: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/37.jpg)
tmas voltaram atrás
![Page 38: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/38.jpg)
exemplo Shadow Dom
<div class="widget"></div>
var host = document.querySelector(".widget"); var root = host.createShadowRoot(); root.innerHTML = "<h1>Estou dentro da div</h1>";
![Page 39: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/39.jpg)
Encapsula style, marcação e script
![Page 40: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/40.jpg)
HTML Imports
![Page 41: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/41.jpg)
t importações carregar
documentos externos em nossa página.
![Page 42: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/42.jpg)
HTML Import<link rel="import" href="beltra-tech.html">
![Page 43: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/43.jpg)
![Page 44: O Mágico mundo de Web Components](https://reader033.vdocument.in/reader033/viewer/2022052822/554f44e6b4c905423f8b4845/html5/thumbnails/44.jpg)
Obrigado
TWITTER.COM/MTEUSORTIZGITHUB.COM/MATEUSORTIZ