Awesome

<em>µ</em>ce-loader

<sup>Social Media Photo by Guillaume Bolduc on Unsplash</sup>

A minimalistic, framework agnostic, lazy Custom Elements loader.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script type="module">
  // <script src="//unpkg.com/uce-loader"> or ...
  import loader from '//unpkg.com/uce-loader?module';

  // will load every custom elements via the path
  loader({
    // by default it's document
    container: document.body,
    // invoked per each new custom-element name found
    on(newTag) {
      const js = document.createElement('script');
      js.src = `js/components/${newTag}.js`;
      document.head.appendChild(js);
    }
  });
  // js/components/compo-nent.js
  // js/components/what-ever.js
  // which will bring in also
  // js/components/whatever-else.js
  </script>
</head>
<body>
  <compo-nent></compo-nent>
  <hr>
  <what-ever></what-ever>
</body>
</html>

If loader({container: document, on(tagName){}}) API is too simplified, feel free to check lazytag out.

About ShadowDOM

If your components use attachShadow and internally use custom elements that should be lazy loaded, be sure the shadowRoot is observed.

const shadowRoot = this.attachShadow({mode: any});
loader({
    container: shadowRoot,
    on(newTag) {
      // ... load components
    }
  });

V2 vs V1

Current version of this module does not invoke the .on(...) method if the element is already registered as Custom Element.

In V1 any tag name would've passed through the loader instead.