Question: advantage of web components over iframes?

[trevorgithub]

I'm very curious about the approach of using web components to contain the different micro frontends. I understand it encapsulates the implementation details of the mico frontend, and could allow different frameworks to co-exist on the same page (even different versions of the same framework). And with the shadow dom, it can provide further isolation of the DOM and CSS. Very cool.

But, I have to ask myself, when using web components as the means of wrapping a micro frontend, what advantage does this give over the old iframe? Yes, web components are undeniably cool, and shiny. And I could see their value in defining a custom library of components that are shared in different micro front ends, which could be built with different technology stacks.

But, if the web component is used to wrap a large block of UI (an entire micro front end), what does web components offer than an iframe does not? It seems like a lot more work to go the web component route. And, there is less browser support. The "good"/modern/evergreen browsers all support web components. But lurking in shadows is IE 11, which a lot of organizations (mine included) need to support (much to every front end developer's chagrin). I know there are webcomponent polyfills for older browser like IE 11. I managed to get a web component working with IE 11 and babel. That wasn't terrible (although it took a while). But the shadow DOM isn't patched so well on these old browsers. ShadyCSS provides some partial implementation of the shadow dom but it's not automatic and its support is limited. iframes just work.

I'm probably sounding like an apologist for iframes. I'm not. I'm just really not able to understand what benefits web components offer for mico frontends. I'd love to hear your thoughts on the matter.