Knowing When a Custom Element Gets Defined

The customElements.whenDefined() method can be used to know when a given custom element has been registered.

Knowing when a custom element is registered may be required in cases where we want to use the element in the page but the defining Javascript code may be present elsewhere (for e.g. an external plugin file).

customElements.whenDefined() returns a Promise that is resolved when the custom named gets defined. If the element is already defined then the Promise will get resolved immediately.

<input-plus-minus></input-plus-minus>

<script>
// check when <input-plus-minus> gets registered
customElements.whenDefined('input-plus-minus').then(function() {
	console.log('element has been registered');
});
</script>