Re:Microsoft Fast Design
by rictic on Friday August 07, 2020 @04:30PM
(#24086127)
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.
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.