HTML DOM customElements define() Method

The customElements define() method is used to define a new custom element. There are two types of custom elements that can be created:

Autonomous custom element: These elements do not inherit from built-in HTML elements.
Customized built-in element: These elements inherit from built-in HTML elements.

Syntax:

customElements.define( name, constructor, options );

Parameters:

name: It specifies the name for the new custom element. The name of custom elements must contain hyphen.
constructor: It specifies the constructor for the new custom element.
options: It specifies the object that controls how the element is defined. It is an optional parameter.

Return value: This method returns void.

Example: In this example, a custom element is defined, named <gfg-custom-element> with a constructor named CustomEl using this method.

HTML

<!DOCTYPE HTML>

<html>

<body style="text-align:center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

<p>

        HTML | customElements define() method

    </p>
 
    <button onclick="Geeks();">

        click here

    </button>

    <p id="arr"></p>
 
    <script>

        var arr =

            document.getElementById("arr");
 
        // Function to define the element

        function Geeks() {

            class CustomEl extends HTMLElement {

                constructor() {

                    super();

                    this.attachShadow({ mode: 'open' });

                    this.shadowRoot.innerHTML = `

            <h1 style="color:green;">  

            GeeksforGeeks Custom

            Element Data

                </h1>

            `;

                }

            }
 
            // Use the define() method to define

            // a new element

            window.customElements.define(

                'gfg-custom-element', CustomEl);

        } 

    </script>

    <gfg-custom-element></gfg-custom-element>

</body>

</html>