Vue Scoped通过<style scoped>启用，由构建工具在编译时为元素添加data-v-xxx属性并将CSS选择器重写为.class[data-v-xxx]，实现组件级样式隔离；默认不穿透子组件内部，穿透需用:deep()等语法。
在 Vue Options API 中，scoped 属性通过 <style scoped> 声明即可启用，它让 CSS 只作用于当前组件的模板元素，不污染全局或其他组件。这不是浏览器原生支持的特性，而是由构建工具（如 Vue Loader）在编译阶段自动注入属性选择器实现的隔离。
怎么写才生效
只需在单文件组件（.vue）的 <style> 标签上添加 scoped 属性：
- 写法：
<style scoped>.box { color: red; }</style> - 对应模板中所有元素（包括根节点和内部子元素）会被自动加上类似
data-v-abc123的唯一属性 - 编译后样式实际变成：
.box[data-v-abc123] { color: red; }，只匹配带该属性的元素
scoped 对子组件的影响
默认情况下，scoped 样式不会穿透到子组件内部，哪怕子组件也用了 scoped：
- 父组件的
.title样式无法影响子组件里的<h2 class="title"> - 子组件根元素会带上父组件的
data-v-xxx属性，但子组件内部元素不会 - 子组件自己的 scoped 样式仍独立生效，互不干扰
需要修改子组件样式时怎么办
当必须调整第三方组件或嵌套子组件的内部样式时，Vue 提供了穿透语法：
立即学习“前端免费学习笔记（深入）”；
-
:deep(.btn)：让.btn选择器作用于子组件内部任意层级（推荐用于普通子组件） -
:global(.highlight)：把样式提升为全局，不加任何属性限定（慎用，避免污染） -
:slotted(.slot-item)：专门用于作用于具名插槽内容中的元素
常见误区提醒
使用 scoped 时容易忽略这些细节：
- 不能用
!important穿透 scoped 限制——它只提高优先级，不突破属性匹配逻辑 - 动态类名（如
:class="['item', isActived && 'active']"）仍受 scoped 控制，无需额外处理 - 如果子组件是
<transition>、<keep-alive>包裹的，其内部真实 DOM 同样遵循 scoped 规则 - 不要在普通 HTML 文件里写
<style scoped>——原生不支持，且无编译器处理
