HTML DOM window customElements property

0 0 1 minute read

The customElements property returns a reference to a CustomElementRegistry object, which can be further used to register new custom elements and hence get information about previously registered custom elements.

Syntax:

var obj = window.customElements;

Return Value:

CustomElementRegistry Object: This property returns an object which contains details about Custom Elements defined.

Example: In this example, we will get information about custom elements and will create a custom element using define() method.

html

<!DOCTYPE HTML> 
<html>  
<head>
    <title>customElements property</title>
</head>   
<body style="text-align:center;">
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1> 
    <p> 
    HTML | customElements property    
    </p>
    <button onclick = "Geeks();">
    click here
    </button>
    <p id="arr"> 
    </p>       
    <script> 
        var arr = document.getElementById("arr");
        function Geeks() {
          let customElementRegistry = window.customElements;
          class CustomTitle extends HTMLElement {
              constructor() {
                super()
                this.attachShadow({ mode: 'open' })
                this.shadowRoot.innerHTML = `
                <h1>Newly Defined Custom Element's Data</h1>
                    `
                      }
                }
        window.customElements.define(
                'custom-title', CustomTitle);
        console.log(customElementRegistry)
        } 
    </script> 
    <custom-title></custom-title>
</body>   
</html>

Output:

Before Button Click:

After Button Click:

customElements object:

Supported Browsers:

Google Chrome 54 and above
Edge 79 and above
Firefox 63 and above
Safari 10.1 and above
Opera 41 and above
Internet Explorer not supported

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!