Web Components permitem reutilizar código HTML, CSS e JavaScript através de componentes customizados que encapsulam suas funcionalidades. São compostos por templates, elementos customizados, Shadow DOM e imports, permitindo isolar e empacotar funcionalidades reutilizáveis de forma independente no DOM.

1. Web
Components
Descubra o conceito da nova Web

2. Diego Melo
Full Stack Developer - Universidade Tiradentes

3. O que é?
O conceito de Web Components é bem simples, basta imaginar que
tenhamos que reaproveitar um conjunto de camadas como
Controller e View em algum momento na nossa aplicação e ao invés
de duplicarmos as mesmas, as agrupamos em um Component para
possamos reutilizá-lo quando quisermos.

4. Como são compostos?
Eles são compostos por 4 especi cações, sendo elas:
Templates
Custom Components
Shadow DOM
Imports

5. Templates
De nem pedaços de código(HTML) que são totalmente inertes à
página até que seu Javascript os ative, ou seja, o template não
existirá na página até que você necessite.

6. <div class="uma-classe">
<h1>Um título</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

7. Custom Elements
São elementos customizados, onde permite-nos criar tags diferentes
dos canônicos como "body", "input" ou "div" e injetar os templates
dentro das mesmas.

8. <top-menu name="Menu principal">
// código do menu
</top-menu>

9. Shadow DOM
É onde uma parte do código do seu elemento é encapsulada e
escondida pelo browser, ou seja, não é visível no código normal do
DOM, mas que monta todo seu componente “por baixo dos panos”.

10. Imports
Uma vez tendo um trecho de DOM isolado, com estilos e
comportamentos independentes de outros componentes, agora
precisamos empacotar isso. E para isso servem esses imports que
declara os arquivos e dependências do componente para que eles
possam ser lidos posteriormente.

11. Exemplo de componente
<login-form></login-form>

12. Como se
trabalhava antes?

14. Como se trabalha hoje com
Web Components

16. Nada mal hein?

17. Quero usar, mas
por onde
começo?

18. Webcomponents.org

20. Polymer

22. SkateJS

24. Bosonic

26. X-tag

27. AngularJS / Angular 2

29. Github:
Facebook:
Instagram:
Obrigado! ;)
github.com/diegomelo182
facebook.com/diego.melo.370
@diegomelo182aju