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 >
|
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
Last Updated :
24 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...