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.
