Re: [WICG/webcomponents] Lazy Custom Element Definitions (#782)

frederikbosch left a comment (WICG/webcomponents#782)

> Here's a scenario from a real-world, well-known site that is heavily invested in Web Components, where the architecture could really benefit from some sort of lazy loading platform feature as is being discussed here...

I am running into a very similar scenario. I have many pages without large components or even without components at all. An `unknown-element` event as suggested @keithamus would allow to load the elements only when present in the DOM. With an additional CSS state `:defining` it would be possible to show a spinner or other loading state graphic while the promise is being resolved.

Another option would be to access a list of unknown elements after parsing the DOM. Something like:
```js
async loadComponent(tag) {
  return (await import(`webcomponents/${tag}.js`)).default;
}

document.addEventListener("DOMContentLoaded", (event) => {
  console.log(event.unknownElementTags); // ['my-element-of-interest']
  for (const tag of event.unknownElementTags) {
    customElements.define(tag, loadComponent(tag)); // my-element-of-interest:defining CSS state activated
  }
});
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/782#issuecomment-2724088564
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/782/2724088564@github.com>