能否在不使用iframe的情况下，在Web Component中创建独立DOM实例？

现有iframe方案的问题 #

• 我开发了一个Angular组件，用来展示响应式设计效果，核心用<iframe>实现：因为iframe能创建独立于主应用的DOM实例，内部元素设置30vw这类相对宽度时，会响应iframe的尺寸而不是用户的屏幕尺寸。
• 但这个方案有兼容性缺陷：Chrome和Edge支持通过编程方式直接往iframe里嵌入组件，Firefox却不支持。为了兼容Firefox，我得给每个要演示的组件单独创建页面并传入URL，这会导致重复加载整个应用——如果一页有10个演示，用户设备就得额外加载10次网站，就算用懒加载也会消耗过多资源。

尝试Web Component的诉求 #

• 之前了解到Web Component使用shadowDOM传递数据和样式的特性，想知道能不能用它替代iframe，实现同样的独立DOM环境效果。如果可行的话，相比iframe搭配broadcastChannel API传递数据会更易用。
• 我做了一个测试示例，但还没实现独立DOM实例的效果，另外示例里的resize: both属性也不生效，希望能解决这个问题。

内容的提问来源于stack exchange，提问作者Optiq