What are HTML Custom Elements
First class support of custom elements in HTML
So finally we have first class support for custom elements in HTML now. We can define our own custom tags in pure JS without the need of an external library.
Defining your own custom HTML element is very simple. You need to use customElements.define
method to register your component so browser can understand and render your HTML element.
customElements.define
method takes three arguments
- Name of your component. ( for e.g.
colored-text
) - Your component. ( i.e. A ES6 class )
- An optional object if you are trying to extend another HTML tag
Let’s try to write a custom HTML tag which will render text with different colors.
The colored-text
element takes one attribute color
and according to that, it changes the font color of text written inside it.
If you run colored-text.html
in your browser you will see colored-text
in action
Let’s have a look at what is exactly happening here
In this snippet, we are defining a new class ColoredText
which extends HTMLElement
. We are not going to go deep in this but you should know that HTMLElement
class provides our custom element will all of the things it needed to run in the browser like lifecycle hooks and other bindings.
We have our constructor
and inside it, we are calling super()
which calls HTMLElement
constructor ( again we don’t have to focus on this ) after that we are extracting color
attribute passed to colored-text
and storing it inside the color
variable. So whatever attribute you pass to colored-text
it will be accessible using this.getAttribute
method.
In the next line, we are creating a Shadow Dom. The reason behind this is this is a custom HTML component and its HTML and CSS style should be scoped to only this element. That means its Markup or CSS style should not affect anything outside it.
After creating the Shadow Dom we created a paragraph
element to display text passed to colored-text
inside the browser. In the next line we set paragraph
innerHTML to be equal to innerHTML of colored-text
element. That means paragraph
innerHTML will be replaced by whatever is written between <colored-text></colored-text>
We are setting this.innerHTML
to empty because we if we don’t it will show “Hello” which we don’t want. We want our custom element to show “Hello” wrapped inside a paragraph
tag.
Next up we create a style
element and inside it, we set the color of paragraph
tag to be the same as color
passed to colored-text
i.e. “red” or “yellow”
And in the end, we append both our style
and paragraph
element to our Shadow DOM.
We are all set just one thing is remaining and that is registering our component so the browser can find out what to render when it encounters colored-text
in our markup. We do that by calling customElements.define(‘colored-text’, ColoredText)
You can see we are using our custom HTML component colored-text
here
And it works perfectly fine. Firstly we pass color
as red so the browser renders “Hello” in red and second time we pass yellow and browser renders “Hello” in yellow.
What would you do with these custom HTML elements?
I personally like them. Still, they are no match for a library like React
or Angular
but having First class support of custom Elements without the need of any external dependencies open a lot of opportunity for vanilla Javascript applications. It also will help us to write more reusable HTML.
Stay tuned for the next part
In the next part, I will be explaining how to use lifecycle hooks and some other stuff so we can better use them in our applications.
keep sharing 😃 and clapping 👏
Here are more articles for you.
Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.
I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.
Really loved this article ?
Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.
Peace.