https://github.com/webreflection/uce-loader
A minimalistic, framework agnostic, lazy Custom Elements loader
https://github.com/webreflection/uce-loader
Last synced: over 1 year ago
JSON representation
A minimalistic, framework agnostic, lazy Custom Elements loader
- Host: GitHub
- URL: https://github.com/webreflection/uce-loader
- Owner: WebReflection
- License: isc
- Created: 2020-07-13T13:40:25.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-12-24T11:17:20.000Z (over 5 years ago)
- Last Synced: 2025-03-27T14:11:14.122Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://medium.com/@WebReflection/some-web-components-hint-75dce339ac6b
- Size: 32.2 KB
- Stars: 34
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# µce-loader
**Social Media Photo by [Guillaume Bolduc](https://unsplash.com/@guibolduc) on [Unsplash](https://unsplash.com/)**
A minimalistic, framework agnostic, lazy Custom Elements loader.
### Example
```html
// <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
```
If `loader({container: document, on(tagName){}})` API is too simplified, feel free to check [lazytag](https://github.com/WebReflection/lazytag#readme) out.
### About ShadowDOM
If your components use `attachShadow` and internally use custom elements that should be lazy loaded, be sure the `shadowRoot` is observed.
```js
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.