HTML DOM customElements get() method

Last Updated : 24 Aug, 2022

The customElements get() method returns the constructor used for a previously-defined custom element.

Syntax:

constructor = customElements.get('custom-element-name');

Parameters:

name: The name of the custom element whose constructor you want to return.

Return value: This method returns the constructor for the custom element, or undefined if there is no custom element definition with that name.

Example: In this example, we will define a custom-element and then will get its constructor using this method.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>get() method</title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
<p>
        HTML | customElements get() method
    </p>
 
    <button onclick="Geeks();">
        click here to get constructor
    </button>
    <p id="a">
    </p>
 
    <script>
        var a = document.getElementById("a");
        function Geeks() {
            class CustomEl extends HTMLElement {
                constructor() {
                    super()
                    this.attachShadow({ mode: 'open' })
                    this.shadowRoot.innerHTML = ` 
                    <h1 style="color:green;"> 
                        GeeksforGeeks Custom Element Data 
                    </h1> 
                    `
                }
            }
            window.customElements.define('gfg-custom-element', CustomEl);
            console.log(customElements.get('gfg-custom-element'));
        }
    </script>
</body>
</html>