Let's say you have a phone with a touchscreen. This touchscreen is a component of the mobile phone, working in conjunction with various other components, such as the circuit board and battery. Very few of us know how a phone screen works individually, yet we're all able to operate a mobile phone with ease. The same can be said of Web Components, which are the complex building blocks of websites which become navigable to all.
More importantly, the millions of phone screens around the world today are largely based on only a handful of designs. Fundamentally, the technology behind the mobile component is reusable and adaptable, and the same principle applies to Web Components.
The above points show how component methodology can be useful in creating a better product. Now, you must be thinking, why do we even need to look into the concept of components on the web? Well, I would like you to recall the last five sites that you visited. All these five sites probably shared a few features in common. Some of these are a header, a footer, some sort of menu, and an advertisement section. All these features, in terms of functionality, are doing the same thing. The only thing that differs is the look and feel.
Let us consider another use case where the site domain is the same but there are multiple web apps running on that domain.
We have all used Google or at least two or three Google services. If we observe, there is a section at the top-right corner on any of the Google services/sites. It's your account information, the one with your profile picture. And it shows the list of accounts you have logged in with:
You will be able to see a similar account information card when you go from one service to another. Imagine being able to convert this functionality into an HTML tag <account-info> and being able to reuse it again and again on different services. This can be achieved with the help of Web Components.
A Web Component is a collection of specifications that lets a user create a functionality with a certain look and feel and which can be reused in such a way that all this functionality is encapsulated.
Just like the preceding example, <account-info>, a Web Component lets you put your functionality into its own custom name, which can be represented by an HTML tag, and then encapsulate its functionality. This encapsulation makes it easy to distribute and it can be reused again and again very easily.
In all, a Web Component lets you create a custom HTML tag that can be reused, and whose functionality is encapsulated from the user.
Now that we know what Web Components are and what Web Components can do, let's talk about Web Component specifications.