Ir al contenido

← Ruta· Lección 3 de 8

Galería de imágenes (vanilla CE)

Una image-gallery completa solo con Custom Element + Shadow DOM.

TODO i18n: Traducción completa pendiente. Título y descripción localizados; el cuerpo permanece en portugués por ahora.

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

Contrato da tag

<image-gallery columns="3">
  <img src="..." alt="Praia" />
  <img src="..." alt="Montanha" />
</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.

Practica