Este repositório tem como objetivo ser um projeto base para a construção de Web Components. 😉
Fornecendo uma fundação sólida e eficiente para o desenvolvimento de componentes web customizados e documentados para qualquer tipo de framework! 💫
📦 Ele utiliza as bibliotecas 📦
Link | Descrição | |
---|---|---|
📘 | Docs | Link para a documentação, utilizando Histoire. |
🖥️ | App | Link que demonstra a utilização de Web Component em um ambiente real. |
Vue 3 é a mais recente versão do framework Vue.js, utilizado para desenvolver aplicações web interativas.
Ele oferece uma série de melhorias, como otimização de desempenho, uma API reativa mais eficiente e funcionalidades como a Composition API, tornando o desenvolvimento front-end mais poderoso e flexível.
Web Components são uma coleção de tecnologias que permitem criar componentes HTML personalizados. Estes são encapsulados e podem ser reutilizados em diferentes projetos web. As três principais tecnologias são:
-
Custom Elements: Permite a criação de novos elementos HTML personalizados com comportamento e propriedades específicas.
-
Shadow DOM: Oferece um encapsulamento robusto para os estilos e o markup do componente, garantindo que eles não afetem o restante da aplicação.
-
HTML Templates: São modelos HTML que podem ser clonados e reutilizados, facilitando a manipulação e inserção de novos elementos no DOM.
Utilização no Vue 🛠️
Vue 3 torna a integração com Web Components bastante direta.
É possível encapsular a lógica de negócios e os estilos em um único componente, tornando-o altamente reutilizável e fácil de manter.
Além disso, Vue 3 tem suporte nativo para Custom Elements e Shadow DOM, permitindo que Web Components sejam usados como se fossem componentes Vue nativos.