Web Components

O que são Web Components?

Web Components são uma tecnologia nativa do navegador que permite criar componentes encapsulados e reutilizáveis, com uma interface bem definida. Esses componentes podem ser usados em qualquer framework ou até em projetos sem framework, como se fossem elementos HTML personalizados.

A ideia é que você crie um componente que seja independente de qualquer tecnologia específica, e depois use esse componente onde quiser, seja em React, Angular, Vue, ou até em um projeto sem nenhum framework.

🔥 Nosso Web Component está no NPM!

Agora você pode usar o [@mozgbrasil/web-components] diretamente no seu projeto instalando via NPM! Isso significa mais praticidade, atualizações fáceis e compatibilidade com diversos frameworks e bibliotecas.

🚀 Por que usar via NPM?

✅ Facilidade de instalação – Basta rodar um comando e pronto! ✅ Atualizações simplificadas – Sempre tenha a versão mais recente com melhorias e correções. ✅ Integração com qualquer projeto – Funciona com Vanilla JS, React, Vue, Angular, Svelte e outros. ✅ Melhor organização do código – Mantenha seu projeto modular e escalável.

🔗 Veja no NPM

📖 Veja ao vivo no Storybook

Explore e teste os componentes diretamente no nosso Storybook público:

🔗 https://mozgbrasil.github.io/node-web-components-storybook/

---

Instalação

npm install @mozgbrasil/web-components
# ou
yarn add @mozgbrasil/web-components
# ou
pnpm add @mozgbrasil/web-components

Uso via CDN (sem build)

Para testar rapidamente em um projeto estático, importe o bundle ESM direto da CDN.

<!-- jsDelivr -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@mozgbrasil/web-components/dist/mozg-web-components.es.js"
></script>

<!-- ou unpkg -->
<script
  type="module"
  src="https://unpkg.com/@mozgbrasil/web-components/dist/mozg-web-components.es.js"
></script>

<mozg-button variant="primary">Enviar</mozg-button>

Uso rápido (HTML/Vanilla)

Importe o bundle ES Module uma única vez e use os elementos personalizados no HTML.

<script type="module">
  import '@mozgbrasil/web-components/dist/mozg-web-components.es.js';
</script>

<mozg-button variant="primary">Enviar</mozg-button>

Uso em frameworks

React

// src/main.tsx
import '@mozgbrasil/web-components/dist/mozg-web-components.es.js';

export function App() {
  return <mozg-button variant="primary">Clique</mozg-button>;
}

Vue

// main.ts
import '@mozgbrasil/web-components/dist/mozg-web-components.es.js';

Svelte

<!-- +page.svelte ou um layout raiz -->
<script>
  import { onMount } from 'svelte';
  onMount(async () => {
    await import('@mozgbrasil/web-components/dist/mozg-web-components.es.js');
  });
  // Alternativamente, inclua a tag <script type="module" ...> via app.html
</script>

<mozg-button variant="success">OK</mozg-button>

<template>
  <mozg-button variant="secondary">Salvar</mozg-button>
</template>

Angular

No app.module.ts:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

E importe o bundle em main.ts:

import '@mozgbrasil/web-components/dist/mozg-web-components.es.js';

Theming e estilos

• Suporte a tema claro/escuro via CSS variables.
• Exemplo de troca de tema global:

html.dark {
  /* sobrescreva tokens de cor se necessário */
}

Acessibilidade (A11y)

• Componentes com foco acessível e atributos ARIA quando aplicável.
• Teste com navegadores e leitores de tela; reporte issues quando encontrar problemas.

Performance

• Bundle ESM para carregamento moderno.
• Componentização evita duplicação e facilita lazy-loading quando necessário.

Roadmap (resumo)

• Mais componentes de formulário e navegação.
• Melhorias de a11y, testes visuais e docs com exemplos.

Links úteis

• Pacote NPM: https://www.npmjs.com/package/@mozgbrasil/web-components
• Storybook: https://mozgbrasil.github.io/node-web-components-storybook/
• Guia rápido: consulte também Referência → Backend API para integrações de front com nossas APIs
• Aplicativos móveis e PWA/TWA: Referência → Aplicativo móvel