Disclaimer: I know React is a library and not a framework, but for the purposes of this post I will refer to it as a framework.
What are Web Components?
Web Components are reusable client-side components based on official web standards and supported by all major browsers. They are an excellent way of encapsulating functionality from the rest of our code. Not only that, but you can reuse them in every web application and web page.
Web Components enable us to develop entirely independently of frontend frameworks.
The primary benefit of Web Components is that we can use them everywhere. With any framework, or even without a framework. — vuejs.org
How do they work?
Here’s an example of how an autonomous web component can be defined:
When should you use Web Components?
Imagine a company that has developed a highly complex web application using React. Several hundred developers are working on it full-time. They created their own internal React component library to have a robust set of ready-made UI components such as buttons, inputs, dialogs, and so on. That helps to minimize code duplication within the system, which is great!
As we all know, the software industry is one of the fastest-growing and changing industries. This is accompanied by many changes and innovations in Software Engineering. Assuming, next year, someone will release the ultimate frontend framework, which will overshadow any existing one.
More and more developers are adopting the new framework. Over the years, companies will use the framework for new projects, and some will migrate existing ones. React wouldn’t be efficient anymore, and finding good React developers is getting more complicated and expensive.
Vendor lock-in refers to a situation where the cost of switching to a different vendor is so high that one is essentially stuck with the original vendor.
The company in our example would be “locked-in” to the inferior frontend library React. Switching to the new framework would be very expensive and may interrupt business operations. Every single frontend component of the application would have to be migrated to the new framework.