Knowing When a Custom Element Gets Defined

javascript
Published on February 9, 2021

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>
Related Tutorials
How to Create a HTML Custom Element
Naming Rules for Custom Elements
Creating a Custom Element Using Anonymous Class
Comments
Loading Comments