JavaScript question detail
How do you create custom HTML element?
The creation of custom HTML elements involves two main steps,
- Define your custom HTML element: First you need to define some custom class by extending HTMLElement class.
After that define your component properties (styles,text etc) using
connectedCallbackmethod. Note: The browser exposes a function calledcustomElements.defineinorder to reuse the element.
class CustomElement extends HTMLElement {
connectedCallback() {
this.innerHTML = "This is a custom element";
}
}
customElements.define("custom-element", CustomElement);
- Use custom element just like other HTML element: Declare your custom element as a HTML tag.
<body>
<custom-element>
</body>