html原生scoped属性仅firefox支持，chrome等浏览器忽略；vue的scoped是构建时通过data-v-*属性实现的跨浏览器样式隔离方案。
scoped 属性只在 Firefox 中有效，其他浏览器忽略它
HTML 原生的 scoped 属性早在 HTML5 草案中被提出，但最终未被主流浏览器采纳。目前只有 Firefox 支持该属性，Chrome、Safari、Edge 等均不识别——它们会直接忽略 scoped，导致样式仍为全局生效。
常见错误现象：你在 <style scoped></style> 里写了规则，本地用 Firefox 测试正常，但换 Chrome 就发现样式“泄漏”到其他组件或页面了。
-
<style scoped></style>是纯 HTML 层面的声明，不依赖任何框架或构建工具 - 它要求父元素必须是
<style></style>的直接父级（比如<div> <style scoped>...</style> <h1>...</h1> </div>），否则无效 - XHTML 中需写成
<style scoped="scoped"></style>，但现代项目基本不用 XHTML
Vue 的 scoped 并不是 HTML 的 scoped，而是编译时注入 data-v-* 属性
Vue 单文件组件（.vue）里的 <style scoped></style> 和 HTML 原生的 scoped 完全无关。它是 Vue Loader 在构建阶段做的转换：给每个元素加唯一属性（如 data-v-f3f3eg9），同时重写 CSS 选择器，强制匹配该属性。
这意味着：Vue 的 scoped 不依赖浏览器支持，只要用了 Vue 构建流程（Vite/Webpack），就能跨浏览器生效。
- 静态模板中的 class 会被自动加上
data-v-xxx；但v-html渲染的内容不会，所以无法被 scoped 样式命中 - 想穿透 scoped（比如改子组件内部某元素），得用
:deep(.child)或::v-deep .child（Vue 3 推荐前者） - 多个
<style scoped></style>块之间互不影响，但同个块里写.a + .b这类兄弟选择器时，要注意属性是否同时存在
CSS Modules 是 React/Vue/通用项目的更可靠替代方案
如果你不在 Vue 生态，或需要更强的样式隔离（比如 SSR、微前端、多人协作类库），module.css 比 scoped 更可控：类名在构建时被哈希化，天然避免冲突，且 IDE 支持自动补全和跳转。
例如 Button.module.css 中的 .root，会被编译成类似 Button_root__abc123 的唯一类名，JS 中通过 styles.root 引用。
- 不依赖框架运行时，纯构建时处理，兼容性极好
- 支持
composes继承、export变量，比 scoped 更灵活 - 无法直接用标签选择器（如
button）做全局重置，必须靠类名或:global()显式声明
Shadow DOM 提供真正隔离，但成本高、兼容性受限
如果需要最强隔离（比如开发 Web Component、嵌入第三方页面、防止外部样式污染），attachShadow({ mode: 'open' }) 是唯一能实现“样式完全不逃逸、外部样式完全不侵入”的方案。
但它意味着你要手动管理 DOM 插入、事件委托、slot 分发，且 IE 完全不支持，即使现代浏览器也需要 polyfill 或降级策略。
- Shadow DOM 内部的
<style></style>天然 scoped，无需任何修饰符 - 无法用普通 CSS 选择器从外部影响 Shadow 内容，除非暴露
::part()或:host - 和 Vue/React 的渲染机制不天然兼容，需封装 custom element 才能复用
真正容易被忽略的是：scoped 的本质不是“限制样式作用域”，而是“规避命名冲突”。它不解决样式优先级、继承链、动态内容样式缺失等问题。选方案前，先问清楚——你到底要防谁？是同事写的同名 class？第三方库的 reset？还是用户粘贴的富文本？答案不同，技术路径就完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
