Skip to content
Related Articles

Related Articles

Improve Article
HTML DOM window customElements property
  • Last Updated : 14 Jul, 2020

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.




<!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
  • Edge
  • Firefox
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :