vue的scoped样式通过编译时重写css选择器（如.btn→.btn[data-v-f3f2a1b4]）并为模板元素添加唯一data-v-xxx属性实现隔离，运行时仅渲染属性，依赖浏览器原生css匹配机制生效。
Vue 的 scoped 是怎么把样式“锁”在组件里的
它不是靠魔法，而是靠编译时重写选择器 + 运行时加属性。Vue 在构建阶段会为组件内所有 DOM 元素自动添加一个唯一 data 属性（比如 data-v-f3f2a1b4），同时把 .btn 这类原始样式改成 .btn[data-v-f3f2a1b4]。浏览器只匹配带该属性的元素，其他地方的 .btn 完全不受影响。
注意：这个过程发生在构建时（Vite/Webpack 编译阶段），不是 JS 运行时动态加的。所以你在 DevTools 里看到的 data-v-xxx 是静态存在的，不是 Vue 每次渲染都 patch 出来的。
-
scoped对<style scoped></style>内的规则生效，但对@import进来的 CSS 文件无效 - 子组件的根元素如果没显式写
class或data-v-xxx，也不会被父组件的scoped样式命中——它有自己的data-v-yyy - 如果你用
v-html渲染富文本，里面写的.btn不会带data-v-xxx，照样逃逸到全局
为什么直接往 innerHTML 塞 <style></style> 会污染全局
因为浏览器解析 HTML 字符串时，<style></style> 标签会被立即注入到 document 的 ，根本不管它在哪个 div 里。哪怕你写的是 el.innerHTML = '<div>
<style>.x{color:red}</style>
<span class="x">hi</span>
</div>'，.x 也会变成全局样式。
这种写法在微前端、插件嵌入、CMS 富文本等场景下特别危险——第三方返回的 HTML 片段如果含 <style></style>，不处理就直接塞进页面，等于主动开放样式污染通道。
- 正确做法是用
DOMParser解析字符串，提取<style></style>的textContent，再通过CSSStyleSheet实例 +adoptedStyleSheets注入 Shadow DOM - 若无法用 Shadow DOM（比如要兼容 IE 或老安卓 WebView），只能手动剥离
<style></style>标签，或用唯一 ID 包裹内容并重写所有选择器前缀 -
innerHTML = '<style>...</style>'在任何 Shadow Root 下都是无效的——<style></style>被当作文本节点丢弃，不会生效
/deep/ 和 :deep() 不是“穿透”，是“放宽作用域”
很多人以为加了 /deep/ 就能让样式打进子组件内部，其实它只是把选择器从 .a[data-v-xxx] 改成 [data-v-xxx] .a。也就是说，它没突破 scoped 的边界，只是把匹配逻辑从“子元素必须带 data 属性”改成“祖先元素带 data 属性即可”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
这意味着：如果子组件自己也用了 scoped，它的元素有 data-v-yyy，而你的 :deep(.a) 匹配的是 [data-v-xxx] .a，只要那个 .a 元素同时满足“在 [data-v-xxx] 下”且“本身是 .a 类”，就会命中——跟子组件有没有 scoped 无关。
-
:deep()只在 Vue 3 的<style scoped></style>中有效；Vue 2 用/deep/，但已被废弃 -
:deep()不能用于伪元素（如:deep(::before)无效），也不能穿透到异步组件加载前的占位节点 - 真正需要穿透第三方库（如 Element Plus）时，往往得配合
:global()或单独写非 scoped 样式块
纯 HTML 环境下根本没有“组件样式作用域”这回事
浏览器原生不识别 <style scoped></style>，也不理解 .module.css。所有所谓“作用域”，都是构建工具（Vite/Webpack）在打包时做的转换：把 import styles from './Button.module.css' 编译成带哈希的类名 + 动态插入 class 到 DOM。
如果你直接打开一个 index.html，里面写了 <style scoped>.btn{color:red}</style>，那 scoped 就是个无意义的属性，浏览器照常把它当普通样式应用到全局。
- 想在纯 HTML 中模拟隔离，只能靠手动加唯一 ID + 提升选择器权重，比如
#my-widget .btn - Shadow DOM 是唯一原生支持样式隔离的方案，但它要求你主动调用
attachShadow({ mode: 'closed' })，且不能依赖 innerHTML 注入含 style 的 HTML - 很多开发者卡在“以为加了 scoped 就万事大吉”，却忽略了构建流程是否启用对应 loader、是否正确配置 modules 模式
scoped 就只剩个空标签。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
