Bootstrap类在Shadow DOM中失效是因为其CSS默认仅作用于light DOM，Shadow DOM的样式封装机制阻止外部样式穿透；正确做法是用adoptedStyleSheets动态注入已加载的Bootstrap CSSStyleSheet实例，并确保响应式媒体查询和栅格布局所需宿主样式（如display: block）已显式设置。
Bootstrap 的 CSS 默认只作用于 light DOM，一旦你用 attachShadow() 创建了 shadow root，所有 .btn、.card、.row 这类类名就“失效”了——按钮没圆角、栅格不排版、文字颜色全回退。这不是 bug，是 Shadow DOM 的设计原则：样式不穿透。
为什么 Bootstrap 类在 shadow DOM 里完全不生效？
Shadow DOM 默认启用样式封装（style encapsulation），外部 CSS 文件（包括通过 <link rel="stylesheet"> 引入的 Bootstrap）无法影响 shadow 内部节点。浏览器根本不会把 .btn 规则应用到 shadowRoot.querySelector('button') 上。
- 常见错误现象：
<my-button><button class="btn btn-primary">点我</button></my-button>渲染出来就是个裸露的原生按钮，无背景、无 padding、无 border-radius - 响应式断点（如
@media (min-width: 576px)）仍会生效，但前提是该媒体查询被注入到 shadow 内；否则它只作用于 light DOM 容器 -
.row/.col布局塌陷，因为它们依赖父容器宽度，而 shadow host 的宽高常由外部控制，且未显式设置display: block或width: 100%
推荐做法：用 adoptedStyleSheets 动态注入 Bootstrap CSS
这是目前最轻量、兼容性可控（Chrome 73+、Firefox 93+、Safari 16.4+）且不污染全局的方式。你不需要把整个 Bootstrap CSS 复制进组件，而是复用已加载的 CSSStyleSheet 实例。
- 先确保 Bootstrap CSS 已加载完成（比如在
document.head中有<link>），再在组件constructor或connectedCallback中执行： const bootstrapSheet = document.querySelector('link[href*="bootstrap"]').sheet;this.shadowRoot.adoptedStyleSheets = [bootstrapSheet];- 如果使用 Sass 构建，可导出变量并用
:host覆盖，例如：:host { --bs-primary: #0d6efd; }，避免重复定义整套主题
别踩坑：不要手动复制 CSS 或滥用 :host(.btn)
有人尝试在组件内写 <style>.btn { ... }</style>，这等于重写整套 Bootstrap，维护成本爆炸；也有人误以为加 :host(.btn) 就能复用类名，其实 :host 只匹配自定义元素自身，不匹配其子元素上的 .btn。
-
:host .btn是合法的，但必须确保你注入的样式表已包含完整规则，否则依然缺失伪类（如.btn:hover）、状态（.btn:focus）、变体（.btn-outline-secondary）等 - Bootstrap 的响应式栅格依赖父容器宽度，若 shadow host 没设
width或display，.col子元素会收缩为 0 —— 解决办法是给 host 加style="display: block; width: 100%;"或在 shadow 内用:host { display: block; } - 无障碍属性（
aria-expanded、role="dialog"）需手动同步，因为 Bootstrap JS 不会自动读取 shadow 内节点的属性变化
bootstrap.Modal 或 bootstrap.Dropdown 时，发现实例初始化失败、事件监听不到、定位坐标错乱——那已经是 JS 层面的隔离问题了，和 CSS 是两回事。 
