A minimalistic, ~140 bytes, boilerplate to wait for Custom Elements, or libraries, definition.
import when from 'once-defined';
// const when = require('once-defined');
// <script src="//unpkg.com/once-defined">
// other custom elements
when(['outer-comp', 'inner-comp']).then(([Outer, Inner]) => {
// define your components when Outer or Inner classes
// have been registered
});
// uce library example / single name
when('uce-lib').then(({define, render, html, svg, css}) => {
// define your components
});If the awaited component/library is just one entry, it's returned right away. If it's a list of entries, each entry will be found in its related index.
The standard decided that once you customElements.whenDefined(tagName) you need to customElements.get(tagName) once the initial, explicit, intent to wait/retrieve it, is resolved, as specs don't return what you were waiting for once resolved.
With this module, that weights nothing, you can forget about the following boilerplate:
customElements
.whenDefined(thing)
.then(() => customElements.get(thing))
.then(thing => {
console.log('finally we have', thing);
});Use just when(thing).then(thing => { ... }) and call it a day 🎉