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