Web Components in 2020

Nowadays it feels like everyone is crazy about code reusability. The developer’s ability to create reusable components helps them establish some kind of common pattern or convention in their application.

We even see open source tools like Bit take reusability to the next level, so you can develop, share and sync components at scale between your apps.

After all, it would be better for you as a developer if you didn’t have to build the same button component again and again in your project, with just some minor changes between each of them, right?

In my honest opinion, a truly reusable component is one that can be used anywhere and everywhere – The component built in one framework/library can be inserted into another framework/library.

But every framework/library has its own sets of rules that the developer needs to follow. And until now code reusability has been easier to follow if you are working in just a single framework/library. But there are things can Vue can do that Angular and React can’t, and vice versa.

In some of my previous posts, I showed you how Angular has provided us with Angular Elements that can be used to insert an Angular component as a custom element into React or Vue.

But this requires you to have a certain level of understanding of how Angular Elements works.

What we truly need, is something simpler that works in any latest browser and in any JavaScript library/framework.

Enter Web Components!

Web Components is a group of features that allow us to create completely reusable components. In this post, we will take a look at how web components work and how you can use them in your projects.

Web Components are really hot right now, not only because major companies like Netflix and Youtube are already using them, but also because Microsoft recently announced that Edge will soon provide native support to Custom Elements, which is one of the APIs that is used to create web components.

Web Components — What Are They?

As mentioned before, web components are a group of features that let us create reusable components. The best thing about these components is that they nothing more than HTML elements, which means you do not have to install any new framework or library to use them. All you need is pure vanilla javascript!

Web components are created using these primary APIs:

• Custom Elements
• Shadow DOM
• HTML Template

Let’s take a quick look at what each of these technologies are:

Custom Elements

The Custom Elements API is what we actually use to create our custom HTML elements and attach any desired functionality to that element. It lays the foundation on which we can design and use our own elements.

Shadow DOM

This API with a cool ninja-like name of Shadow DOM helps the developer enclose things like styling and markup of the components. Through Shadow DOM, the web browser renders the elements without putting them on the main DOM tree. This is done by creating a sub-DOM tree that is attached to the main DOM tree.

HTML Template

The template is an HTML tag inside which we can write reusable chunks of code. Nothing inside the template will run, load, or render until it is activated by stamping out the template.

Web Component Lifecycle Methods

Like any other component in Vue or React, Web Components also have a few lifecycle methods. They are:

• Constructor
• connectedCallback
• disconnectedCallback
• attributeChangedCallback
• adoptedCallback

The constructor function runs when the component is created, but has not been inserted into the DOM. Like in other frameworks and libraries, constructor is a great place to initialize the state, and we can even set event listeners, creating the Shadow DOM for the component.

When the component is inserted into the DOM, the connectedCallback function will be executed. It is similar to componentDidMount from React, and we can use to do things like fetching data from an API.

As the name probably suggests, disconnectedCallback function is called when the component is removed from the DOM. The function is most useful when we need to remove any event listeners that are connected to a component that is no longer in the DOM.

The attributeChangedCallback function is called when the component’s “observed” attributes get changed.

Getting Started – Creating our first component

To get started, all we need to do is create a new folder where you can store all the code that you are about to write. You can do this the traditional way, or you can go to a terminal are type the following command:

$ mkdir movieswc

give loveWeb Components in 2020 298