The whenDefined()
method of the CustomElementRegistry
interface returns a Promise
that resolves when the named element is defined.
Syntax
Promise<> customElements.whenDefined(name);
Parameters
- name
- Custom element name.
Return value
A Promise
that resolves to undefined
when the custom element is defined. If the custom element is already defined, the promise is resolved immediately.
Exceptions
Exception | Description |
---|---|
SyntaxError |
If the provided name is not a valid custom element name, the promise rejects with a SyntaxError . |
Examples
This example uses whenDefined()
to detect when the custom elements that make up a menu are defined. The menu displays placeholder content until the actual menu content is ready to display.
<nav id="menu-container"> <div class="menu-placeholder">Loading...</div> <nav-menu> <menu-item>Item 1</menu-item> <menu-item>Item 2</menu-item> ... <menu-item>Item N</menu-item> </nav-menu> </nav>
const container = document.getElementById('menu-container'); const placeholder = container.querySelector('.menu-placeholder'); // Fetch all the children of menu that are not yet defined. const undefinedElements = container.querySelectorAll(':not(:defined)'); const promises = [...undefinedElements].map( button => customElements.whenDefined(button.localName) ); // Wait for all the children to be upgraded, // then remove the placeholder. await Promise.all(promises); container.removeChild(placeholder);
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'customElements.whenDefined()' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
whenDefined | Chrome
Full support
66
| Edge
Full support
79
| Firefox
Full support
63
| IE No support No | Opera
Full support
53
| Safari
Full support
10.1
| WebView Android
Full support
66
| Chrome Android
Full support
66
| Firefox Android
Full support
63
| Opera Android
Full support
47
| Safari iOS
Full support
10.3
| Samsung Internet Android
Full support
9.0
|
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.