Social Media Photo by Guillaume Bolduc on Unsplash
A minimalistic, framework agnostic, lazy Custom Elements loader.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport" content="width=device-width,initial-scale=1.0"><scripttype="module">// <script src="//unpkg.com/uce-loader"> or ...importloaderfrom'//unpkg.com/uce-loader?module';// will load every custom elements via the pathloader({// by default it's documentcontainer: document.body,// invoked per each new custom-element name foundon(newTag){constjs=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.
constshadowRoot=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.