Skip to content

How can I check if a custom element is not defined

Gabriel Forti edited this page Jul 27, 2018 · 2 revisions

When a custom element is not defined you can use the query selector to find it using this selector :not(:defined)

While you can defer the custom element from loading right away and use the sample below to wait for all custom elements to be loaded, I recommend to load them before selecting them in JavaScript without the need for the following script.

(async () => { 
    const undefinedElements = document.querySelectorAll(':not(:defined)');

    const promises = [...undefinedElements].map(
      elem => customElements.whenDefined(elem.localName)
    );

    // Wait for all the children to be upgraded, 
    // then remove the placeholder.
    await Promise.all(promises);                            
    window.dispatchEvent(new CustomEvent('customElementsDefined'))
})()
Clone this wiki locally