Web Components 的微前端方案

https://github.com/mantou132/gem-frame

相比 iframe 优点：

1. 性能好
2. 元素 fixed 定位正常，不会被裁剪
3. 没有跨域，web storage 方便共享，不需要和宿主应用交互/通信
4. 共享地址栏

下面是缺点/限制：

1. 能影响宿主环境的性能 // 单进程单线程
2. 宿主环境的安全得不到保证 // 通过有限的隔离以及规范约束
3. 子应用不能正常使用 CSS rem/vw/vh/vmax/vmin 单位，一些 css 不会生效 // 使用容器单位
4. 需要严格遵守命名规范来避免自定义元素重名 // 这是自定义元素的问题

全局对象隔离？ // 在 Realms/Sandbox 中执行 js

子 App 自定义元素不能使用构造函数 // 使用 umd 加载依赖

DOM 操作

只允许注册指定前缀的自定义元素

禁止其他操作

Node.ownerDocument ?

全局事件监听

拦截，替换，适配

子应用错误处理 // 需要重新处理错误栈以便 SourceMap 还原

定义规范/样板库：

• 父应用中的子应用注册表 // 记录路由，子应用资源地址，repo 地址等
• 库共享 // React/Vue/Gem
• 埋点
• 性能分析/报告
• 错误报告
• 消息/通信