Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Web Components - introduced in 2011, are a set of features which allow creation of resuable components using just HTML, CSS and JavaScript.Features, built on the Web Component standards, can be used with (or without) any JavaScript library or framework (i.e. Aura, Angular, React, and Vue) and will work across all modern browsers.

To understand Web Components, we need to understand how it emerged. The key parameters driving the developments in the realm of technology are - better performance, reusability, standardization, interoperability.

DRY(Don’t Repeat yourself) Principle is one of the guiding principles behind Web components, It’s not a new concept and it has been around for a long time. The idea was to split the components into smaller chunks, which are reusable. However, there are limitations in terms of this implementation. For instance, a react component cannot be dropped as it is into the Angular framework or vice versa.

# How are Web Components filling the gap?

The key difference between web components and proprietary component systems is interoperability. Because they can be expressed as real HTML, they can be rendered by all the popular frameworks. So your components can be consumed more widely, in a more diverse range of applications, without locking users into any one framework.

Web components solve one of the biggest problems that programmers have while building application i.e. reducing repetition. The reason for this principle is that one copy of an element is much easier to maintain than multiple copies if the information needs to be changed, there is only one place to change it. In this way the principle promotes efficiency.

Now consider an application platform, consisting of several applications that are maintained by three different development teams. Each team has its own way of working and uses different tech stacks. Thanks to the reusable and interoperable nature of web components, teams don’t have to build the same components in different frameworks anymore.

# Which brings us to our next question - What are Web Components?

Web Components consist of four pillars that are used together.

1. Templates

HTML templates allow us to write markup under <template> tag.
A component that renders UI has an HTML template file and a JavaScript class file.
Content or markup implemented under <template> tag will not render any content until a script (JavaScript) has consumed the template, instantiated the code, and told the browser what to do with it.

2. Custom Elements

Custom elements allow for the creation of our own HTML tags or even tweak what is already available and then we can use it in HTML.
It helps us encapsulate our custom functionality into an element rather than typing long nested HTML elements.

3. Shadow DOM

Shadow DOM is a web standard that allows you to encapsulate style and markup that can be linked to any HTML element.
The Shadow DOM is a subtree that branches off the DOM. It hides away the complexity of components from the rest of the page.

4. Imports

How do we load an image in HTML , using an <img> tag, video had <video>. How do you import a HTML page?
Just like how we import JavaScript and CSS in HTML using <link> or <script>, we can import another HTML page with the <link> tag.
Include an import on your page by declaring a <link rel="import" href=” http://example.com/elements.html”>

# In Conclusion - The Future is Bright

Looking to the future, it’s clear that web components are the way forward. For more information on web Components read the official document in which you will find all about web components, custom elements, shadow DOM, and best practices.

Stay tuned.