Rather than creating a <script> tag to manually load that component’s implementation, you could instead call the dynamic import() function.

Come to think of it, you don’t actually have to migrate to <script type="module">, you would have to ensure running your components in "use strict" mode though, since that’s a requirement to run in ‘module’ mode using the import() statement.

Here would be the updated version of the AutoLoader.load() method with the import()-based syntax (I decided to do it in TS just to help explain things in my demo):

async load(tag: string): Promise<void> {
  const src = this.elementURL(tag);
  await import(src);
}

This essentially just run the other script as a side-effect, you aren’t getting any references from the export of the script. It’s only to load the code that runs the Custom Element definitions.

I sympathize with the HTML Import mourning, though I go back and forth on what it could or should have been.

I agree that an approach like that elems object can be advantageous in some scenarios (thus the cautionary aside in the introduction). In my case, I specifically didn’t want to rely on bundlers or similar tooling though.

I would also use a different sort of autoloader which is more easily WebPackable. Something like

const elems = {
'my-elem': () => import('./my-elem.js')
};
// …

customElements.define(elem, await elemselem. default);`