真正实现bootstrap局部作用域需重编译sass源码：在主scss中用.bootstrap-scope包裹@import "bootstrap/scss/bootstrap"，使所有选择器带前缀；@import css文件无效，shadow dom需adoptedstylesheets注入，js组件须手动指定带前缀的选择器。
用 Sass 嵌套重编译实现真正的局部作用域
直接在 HTML 上加 class="bootstrap-scope" 没用，Bootstrap 的 CSS 规则不会自动识别这个容器。真正起效的方式是：把整个 Bootstrap 的 Sass 源码（比如 bootstrap.scss）包裹进一个作用域选择器里，再重新编译。
常见错误是只改了 HTML 或只加了 !important，结果 .container 还是和你业务里的 .container 冲突。
- 在你项目的主 SCSS 文件顶部写：
.bootstrap-scope { @import "bootstrap/scss/bootstrap"; } - 确保该文件是最终编译入口，且不被其他全局样式覆盖
- 所有生成的选择器都会变成
.bootstrap-scope .btn、.bootstrap-scope .row，天然隔离 - JS 组件（如
Modal）需手动指定 selector：new Modal(document.querySelector('.bootstrap-scope .modal'))
为什么 @import "bootstrap.min.css" 无法隔离
这是最常踩的坑——把压缩后的 CSS 文件用 @import 写进 Sass，它会原样注入到全局样式流中，所有 .btn、input、h1 依然无差别生效。
Sass 的 @import（或 @use）只能封装变量和 mixin，对已编译的 CSS 规则完全无作用域控制能力。
-
@use "bootstrap/scss/functions"→ 安全，只加载逻辑 -
@import "bootstrap/scss/buttons"→ 危险，立即输出全局按钮样式 - 想隔离，必须从源码层入手，不能依赖后置 CSS 文件
Shadow DOM 中复用 Bootstrap 样式要手动注入
如果你在自定义元素中用了 attachShadow()，外部引入的 Bootstrap CSS 默认不会穿透进来，.btn 类名直接失效。
这不是加载顺序问题，而是 Shadow DOM 的封装机制决定的。
- 不要复制 CSS 字符串进
<style></style>，维护成本爆炸 - 正确做法：获取已加载的
CSSStyleSheet实例，调用adoptedStyleSheets：const sheet = document.querySelector('link[href*="bootstrap"]').sheet;<br>this.shadowRoot.adoptedStyleSheets = [sheet]; - 响应式媒体查询仍有效，但需确认宿主元素有
display: block或明确宽高，否则栅格计算异常
Vue/React 中别指望 <style scoped></style> 或 :deep() 拦住 Bootstrap
<style scoped></style> 只影响当前组件模板内渲染出的 class，对 Bootstrap 自己插入的 <style></style> 标签或外部 link 引入的 CSS 完全无效。
哪怕你写了 :deep(.btn)，只要 Bootstrap 的 .btn 规则权重更高（比如带 .form-control），你的样式照样被覆盖。
- Element Plus 和 Bootstrap 同时存在时，
input.form-control会覆盖.el-input__inner的基础样式 - 真正解法是构建期隔离：给 Bootstrap 包一层命名空间，再让业务区域也走同样前缀逻辑
- 若必须共存，优先停用 Bootstrap 的 base 重置（
_reboot.scss），改用轻量 reset
Dropdown 点开没反应才意识到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
