Getting Started with Web Components

Johnny Simpson
JavaScript in Plain English
3 min readMay 6, 2021

--

Photo by Ferenc Almasi on Unsplash

Web components will be familiar to you if you have worked at all with React. They are custom, replicable pieces of HTML, which can be referred to elsewhere in the code.

Web components are their own HTML specification, so you may be surprised they can be used in a standalone manner with pure JavaScript and HTML. Let’s take a look at how to do that.

Imagine we have a status bar item which we reuse in multiple places. The structure of it might look like this:

Imagine having to paste that into multiple places and maintain it so it always looks the same — and what if we change the status bar someday? We will need to go back to all the places that status bar appears, and update those too! Web components allow you to reference this piece of HTML in multiple places, and gives it a unique tag, i.e:

How do we do that? Let’s take a look at how to make your own web components, and how easy it is.

Step 1 — JavaScript

Yes, you guessed it. If you want to make web components, you need to use JavaScript. Let’s take a quick look at how you might create a very simple DOM element, that we will call ‘paragraph’.

The output of this will be a paragraph with the word ‘Hello’ inside of it. Web components depend on the class structure. We use constructor() here to indicate what will happen when the tag loads.

Other functions

Along with constructor, we can add other functions to a class like connectedCallback() which is fired when the DOM element is appended to a page, and attributeChangedCallback() which is fired when an attribute of the element changes, giving us some flexibility:

Step 2 — Expand Functionality

Now we have a way to create a simple element, attach callback events to it, and attach events to attribute changes, let’s consider CSS. When making a standalone and clonable web component, we want it to appear physically the same in multiple places. For that, it needs its own custom CSS. How do we add CSS to a web component?

To do that, we need to use something called the shadow DOM. These are essentially items appended to only one specific item. We can use this for web components by enabling the shadow DOM, and attaching our CSS to it.

Adding CSS

In the above example, any alpha-paragraph element would have a paragraph which is red and has a font size of 1.25rem.

All paragraphs outside alpha-paragraph will not be red, so you can style your other CSS independently.

Step 3 — Combine with the template tag

Instead of hardcoding our web components into Javascript, we can use HTML tags instead. HTML has two tags we can use here, template and slot.

A template tag refers to the overall web component, while a slot is a small part of that template which can be altered. An example of a template tag looks like this:

The slot on the 2nd line refers to something we can change. In my opinion, we don’t really need to use the template tag, but slots are useful. We can update our alpha-paragraph to have a slot by changing the innerHTML:

Then we can replace the slot with our own custom element using the ‘slot’ attribute in our HTML. In the below example, the whole slot is replaced with a paragraph element containing the text ‘Custom Text’.

Step 4 — Attributes

Since all HTML elements can have attributes, we can access them using the getAttribute function. As such, we can easily rewrite our code to have custom colors:

By putting it all in our Javascript, we ensure we can import this web component elsewhere easily. A demo of our final web component can be seen below:

That’s it. Hope you found this article useful and thank you for reading.

More content at plainenglish.io

--

--