Carregamento, lazy loading e CSP

Bundler

Instale o pacote e importe o loader ESM na entrada da aplicação. O runtime carrega os chunks dos componentes utilizados sob demanda.

import '@govbr-ds/core/dist/core.min.css'
import '@govbr-ds/webcomponents/dist/webcomponents/webcomponents.esm.js'

CDN

Fixe uma versão explícita. Não use latest em produção:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@VERSAO/dist/webcomponents/webcomponents.esm.js"
></script>

Consulte o guia de CDN para estilos e exemplos completos.

Content Security Policy

• Autorize a origem do script em script-src quando usar CDN.
• Autorize fontes e estilos do Core nas diretivas correspondentes.
• Prefira arquivos de script a código inline.
• Valide a aplicação com sua política real; o Playground não substitui essa verificação.

Evitando FOUC

• Carregue o CSS do Core antes de exibir a aplicação.
• Posicione o loader ESM na entrada principal.
• Em SSR, siga o guia de hydration.
• Use o estado de componente definido apenas quando ocultar temporariamente conteúdo for realmente necessário.

Tree shaking e lazy loading

Os componentes Stencil são distribuídos em chunks. Não copie todo o diretório do pacote manualmente nem publique node_modules; permita que o bundler resolva os assets a partir do entrypoint público.