因为Bootstrap原生JS弹层（如Modal、Tooltip）动态挂载到document.body，脱离Vue组件DOM树，而scoped样式依赖data-v-xxx属性选择器，仅匹配组件内渲染节点；:deep()是Vue 3中唯一可靠的穿透方式，可精准作用于子组件内部结构。
为什么 scoped 样式无法直接穿透 Bootstrap 组件内部？
因为 Bootstrap 的 JS 组件（如 BDropdown、BModal）或原生 DOM 插入的弹层（如 bootstrap.bundle.js 创建的 tooltip）会把新元素挂载到 document.body 下，完全脱离当前 Vue 组件的 DOM 树。而 scoped 样式靠的是属性选择器（如 .btn[data-v-xxxx]）匹配组件内渲染的节点——body 下的节点没有这个属性，自然不生效。
:deep() 是唯一可靠的穿透方式（Vue 3 + SFC）
Vue 3 的 <style scoped> 支持 :deep() 伪类，专为解决这类“子组件/第三方组件内部样式覆盖”问题。它不会被编译成带 data-v-xxx 的选择器，而是保留原始结构并提升作用域层级。
- 错误写法：
.dropdown-menu { display: none; }—— 不带:deep()，在 scoped 下无效 - 正确写法：
:deep(.dropdown-menu) { background: #2c3e50; border-radius: 4px; } - 多层嵌套也支持：
:deep(.dropdown-menu) :deep(.dropdown-item)或更简洁的:deep(.dropdown-menu .dropdown-item) - 如果用的是
bootstrap-vue-3，它的<BDropdown>内部结构是 Vue 渲染的，所以:deep()能精准命中；但如果是原生bootstrap.bundle.js触发的下拉，则必须确保该 DOM 节点存在后再样式注入（见下一条）
原生 Bootstrap JS 弹层（如 Modal、Tooltip）的样式怎么加？
它们由 JS 动态插入 document.body，不在组件模板里，:deep() 也管不了。此时只能靠「全局样式 + 条件性作用域」来兜底：
- 不要在
<style scoped>里写，改用<style>（无 scoped）块，放在同一组件文件中即可，避免污染全局 - 给弹层加唯一 class 或 data 属性，缩小影响范围：
const myModal = new Modal(el, { className: 'my-custom-modal' });，然后写.my-custom-modal .modal-content { border: 2px solid #e74c3c; } - 如果用 Composition API 手动控制 Modal，可在
onMounted后用document.querySelector('.modal')检查是否已挂载，再动态插入<style>标签（不推荐，仅应急） - 更稳妥的做法：彻底放弃原生 JS，改用
bootstrap-vue-3的<BModal>，它所有 DOM 都在组件树内，:deep()可控、可预测
容易忽略的兼容性与性能坑
:deep() 在 Vite + Vue 3.4+ 下工作良好，但在某些旧版构建配置（如未升级 @vue/compiler-sfc）中可能被忽略，表现为样式不生效且无报错。
立即学习“前端免费学习笔记（深入）”；
- 检查
vite.config.ts是否启用了vue({ template: { compilerOptions: { ... } } })相关配置 - 避免滥用
:deep(*)或:deep(div)，这等于放弃作用域保护，可能意外覆盖其他组件 - 若项目同时用 CSS Modules 和 scoped，注意两者行为不同：
$style.xxx是运行时生成类名，:deep()是编译时穿透，别混用逻辑 - Bootstrap 5 的
.form-control:focus等伪类默认带!important，局部样式想覆盖必须也加!important（虽然不优雅，但现实如此）
真正麻烦的从来不是怎么写样式，而是搞清那个 DOM 到底是谁创建的、挂在哪儿、有没有 scope 属性——盯住浏览器开发者工具里的实际 DOM 结构，比查文档快十倍。
