Shadow DOM 是唯一能真正隔离多版本样式库的原生方案：必须用 attachShadow({ mode: 'open' }) 创建隔离容器，手动注入对应版本 CSS，并显式重置继承属性（如 :host { color: inherit; font-family: inherit; }）和 CSS 变量，禁止通过 innerHTML 直接插入含 <style> 的字符串。
Shadow DOM 是唯一能真正隔离多版本样式库的原生方案
直接结论：用 attachShadow 封装每个版本的 UI 组件容器，再手动注入对应版本的 CSS，是目前浏览器原生支持的、唯一不依赖构建工具或运行时 patch 的可靠解法。其他方式（如 class 前缀、CSS Modules、iframe）要么无法动态切换版本，要么引入额外通信/性能开销，要么根本不能共存。
为什么 innerHTML = '<style>...</style>' 在 Shadow DOM 里完全无效
常见错误是把整段含 <style> 的 HTML 字符串直接赋给 shadowRoot.innerHTML。这会导致 <style> 标签被当作文本节点解析，根本不会进入 CSSOM，所有规则都不生效——你看到的渲染效果只是 UA 样式或继承值，不是你写的 CSS 起作用了。
- 必须分两步：先用
shadowRoot.innerHTML或shadowRoot.append()设置结构，再单独创建style元素 - 推荐写法：
const style = document.createElement('style'); style.textContent = 'button { color: red; }'; shadowRoot.appendChild(style); - 若需复用公共重置样式，提前创建
CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [baseSheet]注入（注意 Safari 16.4+、Chrome 73+ 才稳定支持）
如何让 Bootstrap 4 和 Bootstrap 5 同时运行且互不干扰
关键不是“加载两个 CSS 文件”，而是让每个版本的组件运行在独立的 Shadow Boundary 内，并切断继承链。否则 * { font-family: sans-serif } 这类通配符规则仍会通过继承渗透进来。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 每个版本的容器必须调用
element.attachShadow({ mode: 'open' })，不能重复调用（会报错） - 顶层必须注入重置样式：
*:not(style) { all: initial; }，否则font-family、line-height等可继承属性仍会从宿主元素流入 - 第三方返回的 HTML 字符串（含内联
<style>）必须先用DOMParser解析，提取textContent再构造CSSStyleSheet，不能直接塞进innerHTML - Bootstrap 的 JS 初始化（如
new Modal(...)）必须在 Shadow DOM 内部执行，否则它查不到内部 DOM 节点
容易被忽略的继承穿透点
很多人以为加了 Shadow DOM 就万事大吉，但以下三类情况仍会“漏”样式：
-
color、font-family、line-height等可继承属性，只要宿主元素上声明了，就会流入 Shadow 内部——必须用:host { color: inherit; font-family: inherit; }显式透传，而非依赖自动继承 -
<a>、<button>等 UA 样式顽固元素，即使写了color: inherit也可能被浏览器默认color: -webkit-link覆盖，需单独重置：a { color: inherit; } - CSS 自定义变量（
--primary-color）不会自动继承，必须显式挂在宿主元素上：<bs4-card style="--primary-color: #007bff;">，然后在 Shadow 内用:host { --primary-color: var(--primary-color); }接收
真正隔离不是靠“不写冲突”，而是靠边界切断。Shadow DOM 不是保险箱，它是防火墙——得配好规则，还得关紧门。
