微前端中如何实现JS、样式和元素的有效隔离？

本文共计1305个文字，预计阅读时间需要6分钟。

目录 + WebComponent 介绍 + js 隔离 + 问题 + 解决 + 方法一：用 Proxy 代理 + 方法二：用快照 + 样式隔离 + 问题 + 方法一：样式增加不同前缀 + 方法二：Shadow DOM + 元素隔离 + WebComponent 介绍 + 微前端框架中，js 隔离、样式隔离

目录

• WebComponent 介绍
• js隔离
• 问题
• 解决
• 方法一用 Proxy 代理
• 方法二 用快照
• 样式隔离
• 问题
• 方法一 样式增加不同前缀
• 方法二 ShadawDom
• 元素隔离

WebComponent 介绍

微前端框架中，js隔离、样式隔离、元素隔离是必须解决的三个问题，下面我们就来分别说说这三个问题是什么？怎么解决？

涉及的核心点是 Proxy，WebComponent，shadowDOM

WebComponent 不在这三个问题中，但是我们做个简单介绍

浏览器默认的标签有 div，a，p等等，浏览器是会自动识别，并且有默认的事件和样式。