scoped样式失效的根本原因是data-v-xxxx属性未正确注入或css选择器未匹配该属性；需同时满足模板元素带该属性且编译后选择器末尾含[data-v-xxxx]。
scoped样式为什么没生效，先看data-v-xxxx有没有加对
Vue的scoped不是魔法开关，它依赖两件事同时成立：模板元素必须带data-v-xxxx属性，且CSS选择器末尾必须匹配这个属性。常见失效场景是——你写了<style scoped></style>，但组件根节点是<template></template>里用v-if或v-for动态生成的，而这些条件不满足时，Vue可能跳过渲染整个子树，导致data-v-xxxx根本没挂上。
检查方法很简单：打开浏览器DevTools，随便点一个本该被scoped控制的元素，看它有没有data-v-xxxx属性；再看对应CSS规则是否已编译成.my-class[data-v-xxxx]格式。如果只有前者没有后者，说明vue-loader没处理这个<style></style>（比如它被lang="less"但没配less-loader）；如果只有后者没有前者，说明模板没被Vue实例真正接管（比如手写innerHTML插入）。
:deep()不是万能穿透，它只改其后选择器的匹配逻辑
:deep()的作用范围非常明确：它只让紧跟着它的那个选择器“逃出”scoped约束，前面的父级选择器依然受data-v-xxxx限制。比如.form :deep(.el-input__inner)，实际编译结果是.form[data-v-xxxx] .el-input__inner，而不是.form[data-v-xxxx] .el-input__inner[data-v-xxxx]——后者根本不存在，因为.el-input__inner在子组件内部，不会自动带上当前组件的data-v属性。
- 错误写法：
:deep(.el-input) .el-input__inner→ 父选择器.el-input被穿透了，但.el-input__inner仍无data-v，且整个链路失去scoped前缀约束，容易污染全局 - 正确写法：
.my-form :deep(.el-input__inner)→ 保证只有.my-form所在组件内才生效，且只影响子组件里的.el-input__inner - 别混用
::v-deep和:deep()，Vite + Vue 3项目只认:deep()；老项目若用webpack + vue-loader ≥15.9，二者等价，但::v-deep是伪类写法，部分CSS预处理器会报错
v-html内容完全游离于scoped机制之外
用v-html插入的HTML字符串，不会经过Vue模板编译流程，自然也不会被注入data-v-xxxx属性。这意味着：哪怕你在<style scoped></style>里写了.content p，它也永远匹配不到v-html里生成的<p></p>——因为那个<p></p>没data-v，而编译后的选择器强制要求它有。
解决路径只有两条：
- 把需要样式的结构改成正常Vue模板（用
v-for、v-if等），放弃v-html - 对
v-html内容单独写全局样式（即不加scoped的<style></style>），或用内联style属性硬编码关键样式
试图用:deep()包裹v-html内容的选择器毫无意义，因为:deep()作用对象是子组件，不是DOM字符串。
伪元素::before/::after必须显式带data-v才能生效
这是最容易被忽略的细节。当你写.tooltip::before { content: "→"; }并加上scoped，Vue不会自动给::before伪元素补[data-v-xxxx]。浏览器看到的是.tooltip::before[data-v-xxxx]，但伪元素本身不支持属性选择器，所以规则直接失效。
正确写法只能手动补全：
.tooltip[data-v-xxxx]::before {
content: "→";
}
但你不能手写data-v-xxxx——哈希值每次构建都变。所以必须借助:deep()或直接放弃scoped，在全局<style></style>里写：
- 推荐：
:deep(.tooltip)::before→ 编译为.tooltip::before，脱离scoped约束 - 不推荐：用
!important强行提权，治标不治本，且破坏CSS可维护性
真正复杂的地方在于：scoped不是“作用域”，而是“属性选择器注入”。理解这点，所有看似反直觉的行为——比如子组件样式不继承、伪元素失效、v-html失联——就都有了统一解释。别把它当黑盒，盯住data-v-xxxx这条线，问题基本就定位了一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
