Web Components 的 shadow DOM 会隔离 Bootstrap 样式，需在 shadowRoot 中显式引入 CSS（推荐 adoptedStyleSheets）；Bootstrap JS 插件不自动识别 shadow 内元素，须手动传入实例；CSS 变量需透传或继承；打包时应确保 CSS 加载完成再定义组件。
Web Components 的 shadow DOM 会隔离 Bootstrap 样式
bootstrap 的 css 默认作用于 light dom，一旦组件启用 shadowroot，外部样式（包括 bootstrap 的 .btn、.card 等）就无法穿透进去——这不是 bug，是规范行为。
常见错误现象：custom-element 里放 <button class="btn btn-primary">，但按钮没样式、圆角/背景/边框全丢失。
- 最直接的解法：在组件内部
shadowRoot中显式引入 Bootstrap CSS（用<link rel="stylesheet">或adoptedStyleSheets） - 推荐用
adoptedStyleSheets动态注入，避免重复加载；需注意浏览器兼容性（Chrome 73+、Firefox 93+、Safari 16.4+ 支持） - 若用 Sass 构建，可导出
bootstrap-css-vars并在 shadow 内通过:host覆盖变量，减少冗余样式
Bootstrap JavaScript 插件（如 Modal、Dropdown）不自动识别 Web Components
bootstrap.js 初始化时只扫描 document.body 下的 light DOM 元素，对自定义标签或 shadow 内节点完全“视而不见”。
使用场景：在 <my-modal> 组件里写 <div class="modal">，但调用 new bootstrap.Modal(...) 失败，或点击触发器无响应。
- 必须手动获取 shadow 内目标元素，再传给 Bootstrap 构造函数：
new bootstrap.Modal(elementInShadow) - 不能依赖
data-bs-toggle自动初始化——Web Components 不触发 Bootstrap 的 DOMContentLoaded 监听逻辑 - 如果组件支持 slot，把触发器（如按钮）放在 light DOM，内容放 shadow 内，再用 JS 桥接事件和实例
Bootstrap 5.3+ 的 CSS 变量与 Web Components 主题联动
Bootstrap 5.3 开始大量使用 css custom properties（如 --bs-primary），这些变量默认不继承进 shadow DOM，但可以主动透传。
性能影响：每次修改主题色时，若在 shadow 内重写全部变量，可能触发多次重绘；不如在顶层 document 上统一设置，再让 shadow 用 inherit 或 var(--bs-primary, #0d6efd) 回退。
- 在
:host上设置style="--bs-primary: var(--bs-primary, #0d6efd);"，让子元素能继承 - 避免在每个组件内重复定义整套变量；优先用
getComputedStyle(document.documentElement)读取并注入到 shadow 样式表 - 注意 Safari 对
adoptedStyleSheets+ 变量动态更新的支持较弱，需 fallback 到<style>标签重写
构建时如何避免 Bootstrap 与 Web Components 的打包冲突
用 Vite / Rollup 打包时，若同时 import Bootstrap CSS 和定义 customElements.define()，容易出现样式未加载完成、组件已渲染的问题。
错误现象：connectedCallback 中同步创建 shadowRoot 并插入结构，但此时 Bootstrap CSS 还在 fetch 阶段，导致初始渲染无样式。
- 确保 CSS 加载完成后再定义组件：用
import("bootstrap/dist/css/bootstrap.min.css")（配合 dynamic import）或监听load事件 - 不要在组件内部
importBootstrap CSS——会造成多份副本；统一在入口或 shared style registry 中管理 - 若用 Lit，可用
static styles = [bootstrapCSS, componentCSS]，Lit 会自动处理adoptedStyleSheets注入时机
真正难的不是让两者共存，而是决定哪些样式该由 Bootstrap 管、哪些该由组件自己封装。比如一个 <bs-input> 是该复用 .form-control，还是只借变量、重写结构？这个边界一旦模糊，后续维护成本会指数上升。
