直接引入Bootstrap 4和5的CSS必出问题，因类名完全重叠（如.btn、.row、.col-6），浏览器仅按加载顺序和权重生效，导致display、margin、gap等样式拼凑错乱，且CSS变量、JS组件选择器、响应式规则均无法协同。
为什么直接引入两个Bootstrap CSS文件必出问题
类名完全重叠，.btn、.row、.col-6这些选择器在 v4 和 v5 中都存在，浏览器只按加载顺序和权重决定谁生效，不认版本。v4 的 .row 是 display: block + 负 margin，v5 是 display: flex + gap，混用后 computed style 会拼凑出错乱组合——比如 display: flex 但 margin 还是 -15px，列间距翻倍或塌陷。
更隐蔽的是变量层：v5 大量依赖 --bs-primary 等 CSS 自定义属性，v4 完全没有；你在 :root 设置了 --bs-primary: #dc3545，对 v4 的 .btn-primary 颜色毫无影响，因为它的 color 是硬编码的 #007bff。
- v4 的
.form-control默认有border-color: #ced4da，v5 则靠:focus和:invalid动态加边框——混用后输入框可能始终无边框，或聚焦时颜色错乱 - JS 组件（如
Modal）内部查找.modal-backdrop，但样式规则可能来自不同版本，导致 backdrop 半透明失效、动画 class 不触发 - 响应式断点本身不冲突，但
@media (min-width: 768px)规则若只注入一次，只会作用于最后加载的那个版本的类上
Shadow DOM 是唯一真正隔离的原生方案
必须用 attachShadow({ mode: 'open' }) 创建独立样式边界，再手动注入对应版本的 CSSStyleSheet 实例。这不是“加个 wrapper div”，而是切断样式继承链和选择器匹配域。
关键操作不是复制 CSS 字符串，而是复用已加载的 sheet：
立即学习“前端免费学习笔记（深入）”；
const v4Sheet = document.querySelector('link[href*="bootstrap4"]').sheet;
const v5Sheet = document.querySelector('link[href*="bootstrap5"]').sheet;
// 在 v4 组件中
this.shadowRoot.adoptedStyleSheets = [v4Sheet];
// 在 v5 组件中
this.shadowRoot.adoptedStyleSheets = [v5Sheet];
- 必须确保 link 已加载完成，否则
.sheet为null；可用link.onload或document.fonts.ready类似机制等待 - Safari 16.4+、Chrome 73+、Firefox 93+ 支持稳定，旧版需 fallback 到
style.textContent注入 -
:host { all: initial; }必须显式写入，否则font-family、color等可继承属性仍会从 light DOM 渗透进来 - 第三方返回的 HTML 字符串（含内联
<style></style>）不能直接赋给shadowRoot.innerHTML，要用DOMParser提取并转成CSSStyleSheet
命名空间前缀方案只适用于单版本场景
给 加 class="bootstrap-iso" 没用——原始 Bootstrap 编译出的 CSS 里压根没有 .bootstrap-iso .btn 这样的规则。真正有效的是用 Sass/LESS 重编译源码：
.bootstrap-iso {
@import "bootstrap4/scss/bootstrap";
}
- 必须修改构建流程，把整个 Bootstrap 源码包裹进命名空间块，否则只是“空挂类名”
- v5 的 CSS Custom Properties（如
--bs-primary）不会被前缀影响，需单独处理：在:root下定义.bootstrap-iso :root { --bs-primary: #007bff; }，或用 JS 动态 setProperty - Bootstrap JS 组件默认查找
.modal，你得显式传入带前缀的选择器：new Modal(document.querySelector('.bootstrap-iso .modal')) - 如果项目同时跑 v4 和 v5，命名空间方案无法共存——你不可能让同一个
.btn同时匹配.v4-iso .btn和.v5-iso .btn
微前端中处理 Bootstrap 混用的实操要点
qiankun 等框架的沙箱机制对全局 CSS 无效，experimentalStyleIsolation 在 Vite 子应用中甚至不支持。必须在构建阶段干预：
- Webpack 子应用：设置
publicPath为运行时动态值，避免/css/app.css请求 404 - Vite 子应用：配置
build.base，且检查产物中所有<link href>路径是否与主应用注册的entry一致 - Element Plus、Ant Design 等 UI 库需通过 SCSS 变量配置 namespace（如
$namespace: 'ep'），让类名变成ep-button，不能只靠 import - Bootstrap 必须重编译嵌套命名空间，且 JS 初始化必须在子应用上下文中执行——
new Modal()若在主应用调用，查不到 shadow 内部节点
最容易被忽略的是继承穿透：哪怕用了 Shadow DOM，只要宿主元素设了 font-family: Inter，子组件里没重置，文字就还是 Inter；color、line-height、text-align 同理。这些不是“样式污染”，是 CSS 规范本身允许的继承行为，必须主动切断。
