[derek1800]

The big advantage from my perspective is component reusability independent of Framework (React, JSP, Angular, none, etc). A couple scenarios come in mind, you have many teams working on web app(s) that need to have the same styling, CX, controls. You can distribute them this way without tying them to a framework. Another example is complex controls that can be downloaded to speed up development.

[interlocutor]

There is also robustness. Today you can't take a React component from one application and drop it in another React application and expect it to just work. You may need to also copy CSS classes, make sure the class names are unique, remove any conflicting ids, global variables and so on. Thanks to Shadow DOM, web components are much more robust. You can just drop a web component in an existing application and expect it to just work, regardless of what framework (Angular, React etc) it is using.

[EGreg]

How is it better than using, say, iframes and postMessage? Is shadow DOM more efficient? Can Web Components work across domains?

I want to have Shadow DOM that encapsulates trust, so the enclosing parent javascript cannot access its contents!!

https://www.w3.org/Bugs/Public/show_bug.cgi?id=20144

[iaml]

Except you can, just use styled-components. If you don’t have any other deps except styling, it works quite nicely.