Web Components, lição 7: Export dual: classe + register

Com o <image-gallery> empacotado, falta decidir como ele chega no app. Uma boa lib de Web Components oferece dois caminhos.

Os dois caminhos

• Auto-register (side-effect): import 'image-gallery' já define a tag.
• Named export: import { ImageGallery, register } from 'image-gallery' dá acesso à classe e deixa você escolher outro nome de tag com register(tag).

export class ImageGallery extends HTMLElement {
  /* ... */
}

export function register(tag = 'image-gallery') {
  if (!customElements.get(tag)) {
    customElements.define(tag, ImageGallery);
  }
}

register(); // auto-register no entry padrão

Dica WC: sempre proteja o define com customElements.get(name). Assim não estoura erro se o módulo for importado duas vezes.

package.json exports

{
  "name": "@css4html/image-gallery",
  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/image-gallery.es.js"
    }
  }
}

Pratique no playground

• ▶️ Export dual (classe + register)

Snippets relacionados:

• 🧩 Export dual
• 🧩 Guarda no define
• 🧩 package.json exports

📚 Lição completa na trilha grátis: Export dual: classe + register

---

← Anterior: Lição 6: Empacotar com Vite (library mode)

Próxima: Lição 8: Consumir a lib em app Vite →