WebComponents - Criando uma tag HTML personalizada | Dias de Dev

Já pensou em criar sua própria tag #HTML ? Com #WebComponents isso fica fácil. É possível criar uma tag personalizada com seus estilos e comportamentos de forma simples e rápida.

A especificação de WebComponents não é tão recente assim e já é bem suportada pelos navegadores mais modernos. Aqui você pode conferir o suporte: https://caniuse.com/?search=components

Quanto a referências para você se aprofundar nesse estudo, aqui tem um post em Português de como criar elementos bem interessantes: http://www.andrefelizardo.com.br/blog/web-components-guia-geral/

Para se aprofundar ainda mais em alguns detalhes como a explicação do template, recomendo esse post em inglês: https://blog.theodo.com/2020/04/can_i_use_web_components/

E para entender sobre o modo do Shadow DOM que utilizamos: https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af

(0:00) - Introdução (0:39) - O que são WebComponents (1:02) - Mão na massa (2:07) - Criando um elemento no JS (3:42) - Criando um template (7:08) - Adicionando slots ao template (8:07) - Reagindo a eventos (10:28) - Entendendo o Shadow DOM (11:36) - Considerações finais

Para mais conteúdos sobre boas práticas de programação, testes, arquitetura de software e tudo que há de bom, não se esqueça de se inscrever e ativar o sininho para receber notificações.

Para entrar em contato:

Telegram: https://t.me/cviniciussdias Twitter: https://twitter.com/cviniciussdias LinkedIn: https://www.linkedin.com/in/vinícius-dias/ GitHub: https://github.com/CViniciusSDias/ ... https://www.youtube.com/watch?v=WNFNfUFWLtk