HTML e JavaScript

Os Web Components são a integração base do GovBR-DS. Eles funcionam como Custom Elements e podem ser usados em uma página HTML, em JavaScript sem framework ou em qualquer stack compatível com a Web Platform.

Instalação

Instale o pacote principal:

pnpm add @govbr-ds/webcomponents

Carregue o registro dos componentes uma vez na entrada da aplicação:

import '@govbr-ds/webcomponents/loader';
import '@govbr-ds/webcomponents/dist/webcomponents.css';

Depois, use os elementos normalmente no HTML:

<br-button emphasis="primary">Continuar</br-button>

Dados e eventos

Os componentes recebem propriedades e atributos conforme sua API. Para dados assíncronos, carregue o estado na aplicação e atualize as propriedades quando a Promise terminar; o componente continua responsável apenas pela apresentação e pela interação.

const button = document.querySelector('br-button');
const response = await fetch('/api/acao');

button.disabled = !(await response.json()).permitido;
button.addEventListener('click', () => {
  // A ação da aplicação fica fora do componente.
});

Consulte a página de cada componente para conhecer propriedades, eventos, slots, CSS Parts e exemplos executáveis.

Quando usar esta integração

• páginas HTML e JavaScript sem framework;
• microfrontends ou aplicações que combinam mais de uma tecnologia;
• projetos em outras stacks que suportam Custom Elements e Shadow DOM;
• componentes compartilhados entre aplicações com ciclos de vida diferentes.

Para integrações específicas, consulte os guias de Angular, React e Vue.