WEB COMPONENTSWorkshop guia para o desenvolvimento de Web

Components

WEB COMPONENTSO FUTURO DA WEB

O QUE GANHAMOSCOM ISSO

Encapsulamento de verdadeReutilização e organização de código sem efeitoscolateraisBaixo acoplamento nativo

PILARESCustom ElementsShadow DOMTemplatesHTML Imports

EMDESENVOLVIMENTOChrome1. Abra a página

chrome://flags2. Habilite a flag de

funcionalidadesexperimentais:#enable‐experimental‐web‐platform‐features.

Firefox1. Abra a página

about:config2. Confirme o aviso de

atenção3. Procure pela preferência

dom.webcomponents.enablede altere seu valor paratrue

CUSTOM ELEMENTS

Sopa de <div>s no Gmail.

CRIANDOvar XModalElement = document.registerElement('x­modal');

PRA QUÊ???<batata></batata>

batata background­color: #FF0; color: #DC8200; font­weight: bold;

var minhaBatata = document.getElementsByTagName('batata')[0];minhaBatata.innerText = "frita";

frita

MAIS QUE SINTAXE

API PRÓPRIAminhaBatata.fritar();minhaBatata.assar();minhaBatata.dourar();

HERANÇAvar SearchableSelectPrototype = Object.create(HTMLSelectElement.prototype);

SearchableSelectPrototype.filter = function(searchTerm) // esconde os <option>s que não contém o termo

var SearchableSelectElement = document.registerElement('searchable­select' prototype: SearchableSelectPrototype);

CICLO DE VIDAcreatedCallback: Uma nova instância do elementofoi criada

attachedCallback: Uma instância foi adicionada aodocumento

detachedCallback: Uma instância foi removida dodocumento

attributteChangedCallback: Um atributo foiadicionado, editado ou removido.

TEMPLATES

OS PROBLEMAS DEHOJE

1 ­ MARCAÇÕES ESCONDIDAS<div id="template" hidden> <img src="404.png" /> <p></p></div>

2 ­ MARCAÇÕES NA TAGSCRIPT

<script id="template" type="text/x­handlebars­template">

</script>

<img src="404.png" /> <p></p>

<template><template id="template"> <img src="404.png" /> <p></p></template>

ATIVANDOvar template = document.getElementById("template");var content = template.content;

var target = document.getElementById("target");target.appendChild(document.importNode(content, true));

SHADOW DOM

ENCAPSULAMENTO

SHADOW ROOTQuando adicionado a um elemento, todo o seuconteúdo se torna invisívelTotalmente separado do documento principalNenhum estilo entra ou saiNão existe colisão de id com elementos dodocumento

Quem o detém é chamado de Shadow HostO host pode ser estilizado de dentro do shadow rootpelo seletor :host

CRIANDO UMASHADOW ROOT

<div id="target"></div>

var target = document.getElementById("target");var shadowRoot = target.createShadowRoot();

var span = document.createElement("span");span.id = "ninja";span.textContent = "Sou um ninja!";

shadowRoot.appendChild(span);

document.getElementById("ninja");//­> null

::shadow, /deep/O pseudo­elemento ::shadow seleciona as shadowroots de um elemento.O combinador /deep/ simplesmente ignora asblindagens que as shadow trees oferecem.

E O TAL DO"ENCAPSULAMENTO?"

O objetivo do Shadow DOM é evitar mudançasacidentais nos componentes, não tirar o controle da

mão dos desenvolvedores.

VOLTANDO...document.querySelector("#target::shadow #ninja")//­> <span id="ninja">Sou um ninja!</span>

document.querySelector("html /deep/ #ninja")//­> <span id="ninja">Sou um ninja!</span>

<content><p id="loser">Vitor Belfort</p>

<template id="template"> <strong>E o perdedor é:</strong> <p> <content></content> </p></template>

var loser = document.querySelector("#loser");var templateContent = document.querySelector("#template").content;var shadow = loser.createShadowRoot();shadow.appendChild(document.importNode(templateContent, true));

<p id="loser"> <strong>E o perdedor é:</strong> <p> Vitor Belfort </p></p>

<article id="target"> <h1>Como Combater a Dengue</h1> <section> <p>Beba bastante água</p> </section></article>

<template id="template"> <h1>Como Combater a Gripe</h1> <content select="section"></content></template>

var target = document.querySelector("#target");var templateContent = document.querySelector("#template").content;var shadow = target.createShadowRoot();shadow.appendChild(document.importNode(templateContent, true));

<article id="target"> <h1>Como Combater a Gripe</h1> <section> <p>Beba bastante água</p> </section></article>

"EM PRODUÇÃO"<video src=".../BigBuckBunny.mp4" controls></video>

9:56

Shadow DOM do elemento <video> no Chrome

Shadow DOM do elemento <video> no Chrome

HTML IMPORTS

COMO?1. Importamos o documento

2. Então usamos nosso elemento normalmente

<link rel="import" href="meu­elemento.html" />

<meu­elemento></meu­elemento>

DETALHESNo arquivo importado, o objeto document se refere aodocumento que o está requisitando.Para ser capaz de selecionar elementos em seuDOM, deve­se acessar o documento importado pelapropriedadedocument.currentScript.ownerDocument.

QUERO USAR HOJE

Polymer

X­Tags

Bosonic

MANTENDO­SEATUALIZADO

TWITTER@Web_Components@zenorocha@rob_dodson@polymer