Este documento fornece uma introdução aos Web Components, incluindo seus pilares como Custom Elements, Shadow DOM e Templates. Ele também discute como habilitar Web Components nos navegadores e fornece exemplos de como criar elementos personalizados, usar Shadow DOM e importar documentos HTML.

1.
WEB COMPONENTS
Workshop guia para o desenvolvimento de Web
Components

2. WEB COMPONENTS
O FUTURO DA WEB

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

4. PILARES
Custom Elements
Shadow DOM
Templates
HTML Imports

5. 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

6. CUSTOM ELEMENTS

7. Sopa de <div>s no Gmail.

8. CRIANDO
var XModalElement = document.registerElement('x­modal');

9. PRA QUÊ???
<batata></batata>
batata {
background­color: #FF0;
color: #DC8200;
font­weight: bold;
}
var minhaBatata = document.getElementsByTagName('batata')[0];
minhaBatata.innerText = "frita";
frita

10. MAIS QUE SINTAXE

11. API PRÓPRIA
minhaBatata.fritar();
minhaBatata.assar();
minhaBatata.dourar();

12. 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('searchable­select'
prototype: SearchableSelectPrototype
});

13. 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.

14. TEMPLATES

15. OS PROBLEMAS DE
HOJE

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

17. 2 ­ MARCAÇÕES NA TAG
SCRIPT
<script id="template" type="text/x­handlebars­template">
</script>
<img src="404.png" />
<p></p>

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

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

20. SHADOW DOM

21. ENCAPSULAMENTO

22. 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

23. 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

24. ::shadow, /deep/
O pseudo­elemento ::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.

25. 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>

26. <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>

27. <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>

28. "EM PRODUÇÃO"
<video src=".../BigBuckBunny.mp4" controls></video>
9:56
Shadow DOM do elemento <video> no Chrome

29. HTML IMPORTS

30. COMO?
1. Importamos o documento
2. Então usamos nosso elemento normalmente
<link rel="import" href="meu­elemento.html" />
<meu­elemento></meu­elemento>

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

32. QUERO USAR HOJE
Polymer
X­Tags
Bosonic

33. MANTENDO­SE
ATUALIZADO

34. TWITTER
@Web_Components
@zenorocha
@rob_dodson
@polymer