What are Custom HTML Elements? | How to use Custom HTML Elements in AEM? | AEM Community Blog Seeding
What are Custom HTML Elements? | How to use Custom HTML Elements in AEM? by Albin Issac
Abstract
In this post, let us explore what Custom HTML Elements are and how to use Custom HTML Elements in AEM.
Custom Elements allow web developers to define new types of HTML elements.Once a custom element is defined, we can use it on par with built-in HTML elements.
Some of the important features are enabled by Custom HTML elements.
Define new HTML/DOM elements
Create elements that extend from other elements
Logically bundle together custom functionality into a single tag
Extend the API of existing DOM elements
Web Components uses Custom HTML Elements as one of the building blocks to enable reusable custom elements(Components).
Rules on creating custom elements:
The name of a custom element must contain a dash (-). So , and are valid names.
You can’t register the same tag more than once. Attempting to do so will throw a DOMException
Custom elements cannot be self-closing(), Always write a closing tag
Steps for creating Custom HTML Elements:
Define a custom element e.g.
Create a class with special methods.
class MyElement extends HTMLElement {
constructor() {
super();
// element created
}
connectedCallback() {
// browser calls this method when the element is added to the document
// (can be called many times if an element is repeatedly added/removed)
}
Read Full Blog
What are Custom HTML Elements? | How to use Custom HTML Elements in AEM?
Q&A
Please use this thread to ask the related questions.
Kautuk Sahni
