The big thing web components solve is interoperability. How do you use a preact component inside an angular app? How do you use an angular component inside a vu

The big thing web components solve is interoperability. How do you use a preact component inside an angular app? How do you use an angular component inside a vue app? Web components are the solution. No matter what library or framework or whatever that you're using, you can render a <div> so you can render a <my-component>. That combined with shadow dom means that the element's internals and its styles are encapsulated, so that you can drop it into a page and it won't mess up the rest of the page and the page can't mess it up. This is particularly valuable for a design system, because a company will have a design and want their web properties to look consistent, but they'll have one app written with angular, and another couple with react, and a few ancient apps written with jquery. You could either convert _everything_ to the latest and greatest thing, or you could write your design system with web components, and it'll work everywhere.