O Mágico mundo de Web Components
-
Upload
mateus-ortiz -
Category
Technology
-
view
124 -
download
2
description
Transcript of O Mágico mundo de Web Components
O Mágico Mundo De
Web Components
@mteusortiz
@mteusortiz/mateusortiz
Front-End Developer
Web Components
HTML5 é o Futuro?
O Futuro
<x-heart>
http://mateusortiz.github.io/x-heart/
Web Components
Shadow DOM
Template
Custom Elements
HTML Imports
Decorators
Custom Elements
Antes com <element>
<element name="x-button" constructor="XBUTTON" attributes="lg sm xs"> <!-- Content --> </element>
Antes com <element>
<element name="x-button" extends="button"> <!-- Content --> </element>
http://goo.gl/GWatuU
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 });
Lifecycle Callbacks
createdCallback();attachedCallback();detachedCallback();attributeChangedCallback();
Funciona no IE6
tpolymer-project.org
tx-tags.org
W3C standards platform polyfills
Template shadow dom HTML ImportsCustom Elements
Com Polymer
<polymer-element name="x-button" attributes="color"> <script> Polymer('x-button', { color: 'red', created: function() { // ... } }); </script> </polymer-element>
Lifecycle Callbacks Polymer
created();
detached();attributeChanged();
attached();
Template
Templates são pedaços
inertes de DOM que podem ser
reutilizados.
# GAMBIARRA
existe vários Templates para server-side e client-side
<template>
como criar?<template> <p>BeltraoInTech...</p> <img src="beltrao.png"/> </template>
como usar?
var tmpl = document.querySelector("#template"); tmpl.content.querySelector("img").src = "dog.gif"; document.body.appendChild(tmpl.content.cloneNode(true));
Shadow DOM
O SHADOW DOM encapsula STYLE e MARCAÇÃO.
<iframe>
Shadow Dom é a mesma tecnologia usada pelos fabricantes de navegadores para implemetar as
tags como <video> e <textarea>.
tmas voltaram atrás
exemplo Shadow Dom
<div class="widget"></div>
var host = document.querySelector(".widget"); var root = host.createShadowRoot(); root.innerHTML = "<h1>Estou dentro da div</h1>";
Encapsula style, marcação e script
HTML Imports
t importações carregar
documentos externos em nossa página.
HTML Import<link rel="import" href="beltra-tech.html">
Obrigado
TWITTER.COM/MTEUSORTIZGITHUB.COM/MATEUSORTIZ