Social Media Photo by Guillaume Bolduc on Unsplash
A minimalistic, framework agnostic, lazy Custom Elements loader.
<!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.
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
}
});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.