Web Components were introduced by Alex Russel back in 2011 for the first time. They are a recommended way to integrate components on the client-side for micro-frontends (a microservice approach to front-end web development).
What exactly are Web Components?
From Mozilla’s documentation,
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
According to Kevin Schaaf (software engineer from Google),
In modern web development today, pretty much everyone uses components to encapsulate UI functionality. Web components allow us to extend the browser with new components. (…) They are low level browser APIs that give us a standard interface for defining new components. Web Components have a common way of being created using HTML and standard DOM APIs that every framework uses and a common way of receiving and sending data using properties and events. But outside of that standard interface, Web Components don’t say anything about how the component is actually implemented or how to build apps out of them. So, Web Components are not one specific framework for building apps and they don’t set out to replace frameworks. They don’t tell us how to render or update the guts of a component. They’re really not opinionated at all. Web Components simply tell the browser when and where to create a component, but not how.
Web Components make easier to enhance HTML content, are good to standardize on and create design systems. Companies like Google and Salesforce are already implementing their own design language taking advantage of this technology.
Some useful links for future exploration: