scoped 样式仍影响其他组件是因为其依赖属性选择器模拟隔离，对 v-html、teleport 到 body 的弹层、子组件内部节点及高权重选择器无效；:deep() 需带括号且仅穿透一级，@import 会失效，应改用 :global() 或分离全局/局部样式。
scoped 不是“引入”外部 CSS 文件的手段，而是让当前 <style></style> 块内的样式只作用于本组件——它不加载文件，只做作用域隔离。
为什么加了 scoped 样式还是影响了别的组件？
因为 scoped 本质是靠属性选择器（如 .btn[data-v-f3f42f0a]）模拟隔离，并非真正的 Shadow DOM。它只对当前组件模板中静态写出的元素生效：
- v-html 渲染的内容不会自动带上
data-v-xxx属性，样式不匹配 - 第三方组件（如
<el-dialog></el-dialog>）挂载到body下的弹层，DOM 不在当前组件树内 - 子组件内部节点（比如
<mybutton></mybutton>里的<button></button>）也不带该属性 - 用了
!important或高权重选择器（如div .btn），可能意外覆盖其他组件
:deep() 穿透子组件样式的写法和限制
想改子组件内部结构（比如 <el-input></el-input> 的输入框边框），必须显式穿透：
- 写法必须是
:deep(.el-input__inner)，括号不能省；:deep .el-input__inner（无括号）在 Vite + Vue 3 中大概率失效 - 只穿透一级：能命中
<myinput></myinput>的根节点以下第一层，但无法再往下穿透它的孙节点 - 不能用在全局样式块里——必须写在
<style scoped></style>内部 - 避免滥用：如果要大面积定制 Element Plus，说明更适合抽离 CSS 变量或换主题方案，而不是靠一堆
:deep()
@import 引入外部 CSS 时 scoped 会失效
@import 进来的 CSS 默认不受 scoped 控制，相当于“注入到全局”：
- 错误写法：
@import '@/styles/button.css';→ 里面所有规则都变成全局样式 - 正确做法：要么把外部文件内容直接复制进
<style scoped></style>，要么用:global()显式包裹：:global { @import '@/styles/reset.css'; } - 更稳妥的替代：用
<style></style>（无 scoped）单独引入复用样式，再用<style scoped></style>写组件专属部分
真正容易被忽略的是：scoped 的隔离能力完全依赖编译时静态分析，任何运行时动态插入的 DOM（包括 Teleport、v-html、第三方库的浮层）都不受保护——这时候得靠类名前缀、CSS Modules 或手动加唯一 class 来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
