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, neveropen 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!
