HTML DOM customElements get() method
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;" > w3wiki </ h1 > < p > HTML | customElements get() method </ p > < button onclick = "Beginner();" > click here to get constructor </ button > < p id = "a" > </ p > < script > var a = document.getElementById("a"); function Beginner() { class CustomEl extends HTMLElement { constructor() { super() this.attachShadow({ mode: 'open' }) this.shadowRoot.innerHTML = ` < h1 style = "color:green;" > w3wiki 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