Web Components são a união de três especificações (Custom Elements, Shadow Dom e HTML Templates) que permitem a criação de componentes reutilizáveis encapsulados. Eles podem ser criados usando tags personalizadas e herdar características, encapsulando conteúdo e estilos. Embora compartilhem o objetivo de permitir o desenvolvimento front-end baseado em componentes, Web Components têm problemas como falta de amigabilidade e suporte completo nos navegadores.

1. Web Components
Yuri Jacques Seixas - JT Front-End

2. O que é um Component?
"Um pacote coerente de artefatos de software que pode ser
desenvolvido independentemente e entregue como unidade e
que pode ser composto, sem mudança, com outros
componentes para construir algo maior."
Desmond D'Souza

3. O que são Web Components?
São a união de 3 especificações:
- Custom Elements
- Shadow Dom
- Html Templates

4. Custom Elements
- Tags personalizadas
Ex:
<yuri-seixas> </yuri-seixas>

5. Custom Elements
- Tags personalizadas
Ex:
<yuri-seixas> </yuri-seixas>
- Herdar características

6. Custom Elements

7. Shadow Dom
- Espelhamento do DOM

8. Shadow Dom
- Espelhamento do DOM
- Encapsulamento

9. HTML Templates
- Client
- JavaScript
- Sub árvore escondida

10. Como criar um Component

11. Como criar um Component

12. Outras opções
➔ Angular Elements
angular.io/guide/elements
➔ Vue.js
github.com/vuejs/vue-web-component-
weapper
➔ Stencil
stenciljs.com

13. Uso dos Web Components no
Google

14. Bibliotecas UI vs Web Components
- Mesmo propósito: tornar possível o desenvolvimento front end
baseado em componentes

15. Bibliotecas UI vs Web Components
- Mesmo propósito: tornar possível o desenvolvimento front end
baseado em componentes
- Adicionar separadamente as bibliotecas

16. Bibliotecas UI vs Web Components
- Mesmo propósito: tornar possível o desenvolvimento front end
baseado em componentes
- Adicionar separadamente as bibliotecas
- UI libraries: + devs

17. Problemas com Web Components
- Não amigável

18. Problemas com Web Components
- Não amigável
- Suporte

19. Problemas com Web Components
- Não amigável
- Suporte
- Diretório central

20. Problemas com Web Components
- Não amigável
- Suporte
- Diretório central
- Indexação em buscadores

21. DÚVIDAS?
yuri.seixas@ilegra.com