Ir para o conteúdo

← Blog

Web Components, lição 3: Galeria de imagens com Custom Element (vanilla)

  • web-components
  • javascript
  • vite
Capa DICA WC — Web Components, lição 3: Galeria de imagens com Custom Element (vanilla)

Com a anatomia da lição 2 em mãos, você monta o componente que vai acompanhar o resto da trilha: o <image-gallery>. Aqui ele é só plataforma: HTML e JS, sem React, sem Vue, sem bundler.

Pense no Custom Element como um mini-app

Dica WC: trate o Custom Element como um “mini-app”: estado interno, eventos para o mundo externo (CustomEvent) e atributos para configuração.

O contrato da tag

  • Os filhos <img> entram via slot (ou o componente lê querySelectorAll no light DOM).
  • O atributo columns controla o grid.
  • O clique numa imagem pode emitir o evento gallery-select com o alt e o src.
<image-gallery columns="3">
  <img
    src="https://picsum.photos/id/110/300/300"
    alt="Pôr do sol no campo"
  />
  <img
    src="https://picsum.photos/id/29/300/300"
    alt="Montanhas nevadas"
  />
</image-gallery>

Por que o Shadow DOM ajuda

O CSS do grid fica dentro do componente. A página host não precisa de classes BEM globais, e o tema do site não quebra o layout da galeria por acidente.

No playground, edite o JS, mude columns e adicione imagens no HTML para ver o grid e o evento gallery-select ao vivo.

Pratique no playground

Snippets relacionados:

📚 Lição completa na trilha grátis: Galeria de imagens com Custom Element (vanilla)

← Anterior: Lição 2: Custom Element + Shadow DOM

Próxima: Lição 4: Mesma galeria no React →

No hub