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

@uasan raises a good point.

The lowest level primitive here is a callback that runs the first time a potentially custom element is seen. That callback can then call `define()`. `lazyDefine()` is then just sugar on top of that.

In the spirit of using promises and being consistent with existing API like `whenDefined()`, we could add a `whenCreated()` method:

```ts
// lazy define my-element:
(async () => {
  await customElements.whenCreated('my-element');
  customElements.define('my-element', (await import('./my-element.js')).MyElement);
})();
```

I still think that `lazyDefine()` is nice sugar, but you can build that in useland:

```ts
const lazyDefine = async (tagName: string, loader: () => Promise<typeof HTMLElement>) => {
  await customElements.whenCreated(tagName);
  customElements.define(tagName, await loader());
};

lazyDefine('my-element', async ()=> (await import('./my-element.js')).MyElement);
```

There are potential race conditions is any API here, because an element _could_ be defined by a different code path in between the callback being invoke and it either calling `define()` or returning a constructor. This is no different than the sync define call really - multiple actors can interfere with each other.



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

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