Web Components 微前端方案
在动态 Script方案的基础上进行少许改动便可以简单支持 Web Components 方案，实现思路如下所示：
- 通过请求获取后端的微应用列表数据，动态进行微应用的预获取和导航创建处理
- 根据导航进行微应用的切换，切换的过程会动态加载并执行 JS 和 CSS
- JS 执行后会在主应用中添加微应用对应的自定义元素，从而实现微应用的加载
- 如果已经加载微应用对应的 JS 和 CSS，再次切换只需要对自定义元素进行显示和隐藏操作
- 微应用自定义元素会根据内部的生命周期函数在被添加和删除 DOM 时进行加载和卸载处理
优缺点
对比动态 Script 的方案可以发现 Web Components 的优势如下所示：
- 复用性：不需要对外抛出加载和卸载的全局 API，可复用能力更强
- 标准化：W3C 的标准，未来能力会得到持续升级（说不定支持了 JS 上下文隔离）
- 插拔性：可以非常便捷的进行移植和组件替换
当然使用 Web Components 也会存在一些劣势，例如：
- 兼容性：对于 IE 浏览器不兼容，需要通过 Polyfill 的方式进行处理
- 学习曲线：相对于传统的 Web 开发，需要掌握新的概念和技术