浅拷贝不直接导致样式污染，但因无法切断原型链引用，会掩盖对象共享问题，加剧微前端中“假隔离”风险；真正有效的是shadow dom等运行时隔离机制。
浅拷贝本身不直接导致样式污染，但它在微前端隔离机制中暴露的“共享原型”问题，会间接放大样式污染风险。关键不在拷贝动作本身，而在于它掩盖了对象引用关系，让开发者误以为已隔离，实则子应用仍共用同一份样式定义或 DOM 结构原型。
浅拷贝无法切断原型链引用
JavaScript 中的浅拷贝（如 Object.assign、展开运算符）只复制对象第一层属性。如果原对象包含函数、构造器、或指向全局样式的引用（例如 Vue 组件的 style 选项、Element Plus 的组件构造函数），这些引用仍指向同一内存地址。微前端子应用若基于相同 UI 库构建，其组件原型（如 ElButton.prototype）天然共享——浅拷贝配置对象不会生成新原型，也不会重写样式注入逻辑。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- Vue2 子应用和 Vue3 子应用都使用 Element UI / Plus，它们的按钮组件最终都依赖相同的 CSS 规则和 class 命名逻辑
- qiankun 的
experimentalStyleIsolation对 Vue2 有效，是因为其样式注入被拦截并自动加了[data-qiankun]前缀；但对部分 Vue3 + Vite 构建的子应用失效，原因正是其样式注入绕过了 qiankun 的劫持点，直接写入—— 而这个行为由底层框架原型决定，浅拷贝无法改变
沙箱失效时，浅拷贝加剧“假隔离”错觉
当微前端沙箱未完全启用（如未设 strictStyleIsolation: true），主应用与子应用共用全局 document.head 和 CSSStyleSheet 实例。此时若通过浅拷贝传递样式配置、主题对象或 class 映射表，看似“复制了一份”，实际所有子应用仍在操作同一套样式注册机制。
- 例如：主应用传入一个主题配置
{ primary: '#1890ff', buttonClass: 'el-button' }，子应用浅拷贝后修改buttonClass，但若该 class 名最终仍被注入到全局，就可能覆盖其他子应用同名规则 - 更隐蔽的是，某些 UI 库（如早期版本 Element Plus）内部缓存了已注册的样式节点，浅拷贝后的实例仍调用同一缓存 API，导致多次挂载时样式重复插入且无清理
真正起作用的是运行时隔离，不是数据拷贝
解决样式污染，核心不是“把样式对象拷一份”，而是阻断样式作用域的传播路径。Shadow DOM 是目前最彻底的方式：它从浏览器渲染引擎层面创建独立样式上下文，任何 CSS 选择器都无法跨 shadow boundary 生效。这与 JavaScript 层面的深/浅拷贝无关。
-
strictStyleIsolation: true启用后，qiankun 为每个子应用创建 shadow root，其内部<style></style>标签天然不泄漏 - 而
experimentalStyleIsolation: true属于“CSS 选择器重写”策略，依赖正确劫持样式插入时机——一旦子应用绕过劫持（如 Vite 的 HMR 或动态import()加载样式），浅拷贝过的配置也救不了它 - 所以，与其纠结如何深拷贝样式对象，不如确认子应用是否真正运行在隔离容器中，并检查其样式是否被注入到 shadow root 内部而非全局 head
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
