Web Components

Introduction

Here’s the official definition of Web Components:

“Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.”
— MDN.

In English, that just means that Web Components are a way for you to create your own HTML tags that you can reuse later.

Front-end frameworks like React or Vue have their own set of components (buttons and such) with all the JavaScript functionality and styling included. Web Components work a lot like those components. You can actually easily integrate Web Components with something like React.

There are three primary ways that Web Components can be created. They can be used individually, but generally, they are all used together to create a web component.

Custom elements

Custom elements give us the capability to create our own tags. A custom element can be created by adding a class to the page’s JavaScript.

Let’s look at the two different kinds of custom ...