← Trail· Lesson 7 of 8

Dual export: ES module + Custom Element

Export the class and register the tag — two ways to consume the same lib.

TODO i18n: Full body translation pending. Title and description are localized; body stays in Portuguese for now.

Uma boa lib de Web Components oferece dois caminhos:

Side-effect / auto-register — import 'image-gallery' define a tag
Named export — import { ImageGallery, register } from 'image-gallery'

Padrão

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

`package.json` exports

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