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!
