Web components play a major role in today’s website development process and also allow developers to pull additional resources already online and utilize such tasks within another web process. Web components, in other terms, are a set of web platform APIs that allow a developer to create new custom, reusable, encapsulated HTML tags in web pages and web apps. Web components are based on four main specifications:
-Custom Elements
-Shadow DOM
-ES Modules
-HTML Template

Web components are also quite easy to use as well, simply import the custom element and then call the element within your code.
When it comes to finding useful web components to add to a new coding site, libraries are often the best resource to utilize. Some libraries I recommend include Hybrids, LitElement, Polymer, Slim.js, and Stencil.
I think that many people assume web components are simply "attachments" to a website, yet they often play a much greater role. It is also important to note that each of the technologies can be used independently or combined with any of the others. In other words, they are not mutually exclusive.

As web development continues to become more and more complicated, it will begin to make sense for developers to start integrating more and more web components. The Web Components specifications are a set of low-level APIs that will continue to grow and evolve as our needs as developers evolve.

Youtube Link: https://youtu.be/uCU76CDkiaQ