O que são Web Components?
Web components são uma variedade de diferentes tecnologias que nos permitem criar elementos customizáveis reutilizáveis, com funcionalidade encapsulada do resto do código e do DOM, aumentando a produtividade e consistência visual dos componentes através de diferentes páginas e aplicações.
Sobre os Zenvia Web Components
Visando a variedade de frameworks que integram o ecossistema dos produtos e da plataforma App Zenvia, optamos pela criação de uma biblioteca agnóstica de frameworks, o Stencil JS. Através do uso dessa ferramenta conseguimos criar components com sua lógica encapsulada, em compliance com as guidelines do Sirius e pronto para ser utilizado. Os seguintes componentes foram criados até agora:
- Avatar
- Card
- Carousel
- Container
- Dropdown Search Select
- Input
- Modal
- Page Header
- Pagination
- Sidebar
- Table
- Table data
- Toast
Mais sobre Web Components
o Stencil JS utiliza shadow dom e custom elements por baixo dos panos. Para um deep dive de como são gerados esses componentes no browser, acesse as docs no MDN
Como utilizar
Temos um repositório com esse projeto dentro do Gitlab da Zenvia. É possível acessá-lo buscando por “web components” na busca do Gitlab. No caso de dúvidas, fiquem a vontade para nos contatar no [email protected]