What are HTML Custom Elements
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.
- 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.
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
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
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
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
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
You can see we are using our custom HTML component
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
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.
Publishing a React Component as an NPM module
we will be going through the process of publishing that component to npm registry.
I am available to give a public talk or for a meetup hit me up at firstname.lastname@example.org 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.