HTML DOM customElements get() method
Last Updated :
24 Aug, 2022
The customElements get() method returns the constructor used for a previously-defined custom element.
Syntax:
constructor = customElements.get('custom-element-name');
Parameters:
- name: The name of the custom element whose constructor you want to return.
Return value: This method returns the constructor for the custom element, or undefined if there is no custom element definition with that name.
Example: In this example, we will define a custom-element and then will get its constructor using this method.
HTML
<!DOCTYPE HTML>
< html >
< head >
< title >get() method</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< p >
HTML | customElements get() method
</ p >
< button onclick = "Geeks();" >
click here to get constructor
</ button >
< p id = "a" >
</ p >
< script >
var a = document.getElementById("a");
function Geeks() {
class CustomEl extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
this.shadowRoot.innerHTML = `
< h1 style = "color:green;" >
GeeksforGeeks Custom Element Data
</ h1 >
`
}
}
window.customElements.define('gfg-custom-element', CustomEl);
console.log(customElements.get('gfg-custom-element'));
}
</ script >
</ body >
</ html >
|
Output:
Before Clicking Button:
After Clicking Button: In the console, the constructor can be seen.
Supported Browsers:
- Google Chrome 54
- Edge 79
- Firefox 63
- Safari 10.1
- Opera 41
Share your thoughts in the comments
Please Login to comment...