Overview:

If you are familiar with building web applications in React you will already have a component mindset. Web Components are similar in that they allow you to create reusable components. The benefit of Web Components, unlike React, is that they are a native browser feature. This means you can use them anywhere with or without a framework.

Basically, Web Components let you extend HTML with your own custom elements. You can define new HTML tags, encapsulate styles and behavior, and create reusable components that can be used across different web applications. They are built on three main technologies:

• Custom Elements (learn more @ MDN)
• Shadow DOM (learn more @ MDN)
• HTML Templates (learn more @ MDN)

Creating A Web Component

Custom Elements allow you to define your own HTML tags. You start by creating a class that extends the built-in HTMLElement class. The class is registered with the browser using the customElements.define method. (Learn more about CustomElementRegistry @ MDN).

Using A Web Component

Once you have defined your element, you can use it in your HTML just like any other HTML tag.