Ir para o conteúdo

← Trilha· Lição 3 de 8

Galeria de imagens (vanilla CE)

Um image-gallery completo só com Custom Element + Shadow DOM.

Nesta lição a galeria é só plataforma: HTML + JS, sem React, sem Vue, sem bundler.

Contrato da tag

<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>
  • Filhos <img> entram via slot (ou o CE lê querySelectorAll no light DOM)
  • columns controla o grid
  • Clique numa imagem pode emitir gallery-select com o alt / src

Por que 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.

Exemplo vivo

Abra Galeria vanilla no playground: edite o JS, mude columns, adicione imagens no HTML.

Pratique