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;">        neveropen    </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;">             neveropen 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> |
Output:
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
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!
