Workshop de Web Components

WEB COMPONENTS
Workshop guia para o desenvolvimento de Web
Components

WEB COMPONENTS
O FUTURO DA WEB

O QUE GANHAMOS
COM ISSO
Encapsulamento de verdade
Reutilização e organização de código sem efeitos
colaterais
Baixo acoplamento nativo

PILARES
Custom Elements
Shadow DOM
Templates
HTML Imports

EM
DESENVOLVIMENTO
Chrome
1. Abra a página
chrome://flags
2. Habilite a flag de
funcionalidades
experimentais:
#enable‐
experimental‐web‐
platform‐features.
Firefox
1. Abra a página
about:config
2. Confirme o aviso de
atenção
3. Procure pela preferência
dom.webcomponents.enabled
e altere seu valor para
true

CRIANDO
var XModalElement = document.registerElement('xmodal');

PRA QUÊ???
<batata></batata>
batata {
  backgroundcolor: #FF0;
  color: #DC8200;
  fontweight: bold;
}
var minhaBatata = document.getElementsByTagName('batata')[0];
minhaBatata.innerText = "frita";
frita

API PRÓPRIA
minhaBatata.fritar();
minhaBatata.assar();
minhaBatata.dourar();

HERANÇA
var 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 VIDA
createdCallback: Uma nova instância do elemento
foi criada
attachedCallback: Uma instância foi adicionada ao
documento
detachedCallback: Uma instância foi removida do
documento
attributteChangedCallback: Um atributo foi
adicionado, editado ou removido.

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

2 MARCAÇÕES NA TAG
SCRIPT
<script id="template" type="text/xhandlebarstemplate">
</script>
<p></p>

ATIVANDO
var template = document.getElementById("template");
var content = template.content;
var target = document.getElementById("target");
target.appendChild(document.importNode(content, true));

SHADOW ROOT
Quando adicionado a um elemento, todo o seu
conteúdo se torna invisível
Totalmente separado do documento principal
Nenhum estilo entra ou sai
Não existe colisão de id com elementos do
documento
Quem o detém é chamado de Shadow Host
O host pode ser estilizado de dentro do shadow root
pelo seletor :host

CRIANDO UMA
SHADOW 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 shadow
roots de um elemento.
O combinador /deep/ simplesmente ignora as
blindagens que as shadow trees oferecem.
E O TAL DO
"ENCAPSULAMENTO?"
O objetivo do Shadow DOM é evitar mudanças
acidentais 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>
  <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>
  <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>

DETALHES
No arquivo importado, o objeto document se refere ao
documento que o está requisitando.
Para ser capaz de selecionar elementos em seu
DOM, devese acessar o documento importado pela
propriedade
document.currentScript.ownerDocument.

QUERO USAR HOJE

Polymer
XTags
Bosonic

TWITTER
@Web_Components
@zenorocha
@rob_dodson
@polymer

Workshop de Web Components

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Último (7)

Workshop de Web Components