Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

HTML DOM customElements define() Method

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


customElements.define( name, constructor, options );


  • 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.


<body style="text-align:center;">
    <h1 style="color:green;">
        HTML | customElements define() method
    <button onclick="Geeks();">
        click here
    <p id="arr"></p>
        var arr =
        // Function to define the element
        function Geeks() {
            class CustomEl extends HTMLElement {
                constructor() {
                    this.attachShadow({ mode: 'open' });
                    this.shadowRoot.innerHTML = `
            <h1 style="color:green;"
            GeeksforGeeks Custom
            Element Data
            // Use the define() method to define
            // a new element
                'gfg-custom-element', CustomEl);


Before Clicking the Button:

After Clicking the Button:

Supported Browsers:

  • Google Chrome 54.0
  • Edge 79.0
  • Firefox 63.0
  • Safari 10.1
  • Opera 41.0

My Personal Notes arrow_drop_up
Last Updated : 24 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials