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. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML

webcomponents.org - Discuss & share web components

They work with any frontend framework seamlessly.

Thus it is a useful way to standardize some components. For example, we can create our own edition of Input Element which has a floating label which we, for now, can call <FloatingLableInput>. It can be imported any framework and used just like any other HTML element like <p>.

Role of Shadow DOM

Shadow DOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element’s features private, so they can be scripted and styled without the fear of collision with other parts of the document.

• It helps us to keep the implementation of custom elements hidden away from normal DOM which means less code to maintain and understand.
• CSS scoping is another great aspect of shadow DOM. It keeps the styling of component private means normal DOM cannot access its styling thus it is useful in avoiding CSS class name collisions.

They are highly interoperable

Web Components use a set of standardized APIs that are native to all modern browsers and run on nearly all mobile devices and desktop browsers today. With Web Components, you can create and share custom elements that work on any site, interoperate seamlessly with the browser’s built-in elements, and play with frameworks of all kinds.

Above mentioned abilities allow some interesting things to happen:

• They can be used in any CMS, React, Vue, etc like any other HTML element.
• It allows us to incrementally incorporate new functionalities with Web Components in existing or legacy applications without having to maintain code on concrete frameworks or libraries.

How React/Vue/Angular can work hand in hand with web components?

• All the frontend frameworks are good at providing state management and event handling which web components are not good at.

Excited to explore more of Web Components in the near future.