workshop de web components
TRANSCRIPT
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
PRA QUÊ???<batata></batata>
batata backgroundcolor: #FF0; color: #DC8200; fontweight: bold;
var minhaBatata = document.getElementsByTagName('batata')[0];minhaBatata.innerText = "frita";
frita
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('searchableselect' 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.
2 MARCAÇÕES NA TAGSCRIPT
<script id="template" type="text/xhandlebarstemplate">
</script>
<img src="404.png" /> <p></p>
ATIVANDOvar template = document.getElementById("template");var content = template.content;
var target = document.getElementById("target");target.appendChild(document.importNode(content, true));
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 pseudoelemento ::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
COMO?1. Importamos o documento
2. Então usamos nosso elemento normalmente
<link rel="import" href="meuelemento.html" />
<meuelemento></meuelemento>
DETALHESNo arquivo importado, o objeto document se refere aodocumento que o está requisitando.Para ser capaz de selecionar elementos em seuDOM, devese acessar o documento importado pelapropriedadedocument.currentScript.ownerDocument.
QUERO USAR HOJE
Polymer
XTags
Bosonic
TWITTER@Web_Components@zenorocha@rob_dodson@polymer