Lazy Custom Element registrations

app.html

<script src="app.js"></script>
<element-1 />
<element-2 />

app.js

// Option 1 - Module path:
// Pass a module path and an export name which will lazily get imported
// when that tag name is enountered.
customElements.define('element-1', './element1', 'Element1');
customElements.define('element-module', './element-module.html');

// Option 2 - Custom Handler function:
// Gets called when a valid custom element name is encountered *and* there
// isn't already a registration
customElements.definitionHandler((name) => {
  if (name == "element-2") {
    import {Element2} from "./element2";
    return Element2;
  }
});

element-1.js

export class Element1 extends HTMLElement {
  connectedCallback() {
    
  }
}

element-2.js

export class Element2 extends HTMLElement {
  connectedCallback() {
    
  }
}