scoped样式失效是因为Vue仅给静态DOM元素添加data-v-hash属性，而v-html内容、挂载到body的第三方组件（如el-dialog）、子组件内部元素等动态或外部DOM不带该属性，导致选择器无法匹配。
加 scoped 是 Vue 单文件组件实现局部样式的最直接方式，但不是加了就万事大吉——它只靠属性选择器模拟隔离，对动态插入、子组件内部结构、第三方弹窗等场景默认不生效。
为什么 scoped 有时没起作用
Vue 编译时会给组件模板里的每个元素自动加上一个唯一属性（如 data-v-f3f2d1e4），同时把 .btn 这类选择器重写成 .btn[data-v-f3f2d1e4]。所以：
- 它只影响当前组件模板中**静态写出的 DOM**，比如
<div class="btn"></div> - 对
v-html渲染的内容、el-dialog这类挂载到body下的第三方组件、或子组件内部的<input>标签，不会自动带上该属性，样式自然不命中 - 如果用了
lang="scss"但 sass-loader 版本太老（data-v-xxx，导致局部失效
::v-deep() 怎么用才可靠
这是穿透 scoped 隔离的官方推荐语法，专为影响子组件内部结构设计：
- 必须写在
<style scoped></style>块内，且紧贴选择器前，例如：.form ::v-deep(.el-input__inner) - 括号不能省——
::v-deep(.el-input__inner)是标准写法；::v-deep .el-input__inner（无括号）在部分构建链路中不被识别 - 只穿透一级：能影响
<myinput></myinput>内部的.el-input__inner，但无法再往下穿透到它内部的<span></span> - 别滥用：覆盖
el-button边框可以，但用它强行改整个 Element Plus 主题，说明架构层该抽离主题变量了
多个 <style></style> 标签混用的顺序和分工
一个 .vue 文件里可以并存多个 <style></style>，但它们行为完全不同，顺序也影响结果：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
立即学习“前端免费学习笔记（深入）”；
-
<style></style>（无属性）→ 全局注入，适合body重置、CSS 变量定义、字体声明，应放在最前面，避免被后续 scoped 覆盖 -
<style scoped></style>→ 局部作用域，带属性选择器，用于组件主体样式 -
<style module></style>→ 启用 CSS Modules，类名自动哈希，需通过$style.xxx在 template 中引用，和::v-deep无关（因为它不依赖属性选择器） - 混合时注意：全局样式先加载，scoped 后加载，若两者定义同名类（如
.header），scoped 的属性选择器优先级更高，但语义上已冲突——说明命名不够具体
lang 属性带来的隐性影响
加了 lang="scss" 不只是换写法，它会改变编译路径和作用域行为：
- 嵌套选择器（如
.wrapper { .btn { } }）会被正确带上data-v-xxx，但旧版sass-loader可能漏处理::v-deep，升级到 v12+ 更稳 - 如果用了 Tailwind，
lang="postcss"或lang="scss"都可能干扰其@layer和@apply行为，建议用纯lang="css"+@import引入 Tailwind 配置 -
lang="less"对::v-deep支持较弱，某些版本需写成/deep/（已废弃）或改用 CSS Modules
真正容易被忽略的是：scoped 不是 Shadow DOM，它没有样式边界防护能力。当你发现某个弹窗样式死活改不掉，第一反应不该是加 !important，而是确认它是否脱离了当前组件 DOM 树——这时候该查挂载点，而不是调选择器优先级。
