scoped属性在现代浏览器中被忽略，w3c已标记为obsolete；css modules通过构建时哈希类名实现样式隔离；shadow dom提供原生样式边界；data-属性模拟易导致权重混乱与动态失效。
scoped属性在浏览器里根本没用
所有现代浏览器（Chrome 125+、Firefox 69+、Safari 17.4+、Edge）都忽略 scoped 属性——它不是“被移除”，而是压根没活过。你写 <style scoped></style>，浏览器解析时直接跳过该属性，样式照常注入全局 CSSOM。W3C 已将其标记为 obsolete，HTML 标准中彻底删除。DevTools 里查 document.querySelector('style').scoped 返回 undefined，说明属性存在，能力不存在。
CSS Modules 是最稳妥的构建时替代方案
它不依赖运行时或 DOM 结构，靠构建工具（Vite/Webpack/Rollup）自动哈希类名，实现真正隔离：
- 写
Button.module.css：.root { color: blue; } - 导入后使用：
import styles from './Button.module.css'→className={styles.root} - 最终生成类似
.Button_root__xyz123，天然避免冲突 - 支持
:hover、@media、@keyframes，无需手动加前缀 - SSR 安全：服务端与客户端哈希一致，hydration 不会失败
缺点是必须有构建流程；纯 HTML 页面无法用。
Shadow DOM 提供原生级样式边界
它是唯一能阻断外部样式穿透、防止内部样式泄漏的方案，但需主动创建封闭 DOM 子树：
- 调用
element.attachShadow({ mode: 'open' }) - 把
<style></style>插入 shadowRoot，而非 document.head - 外部
* { font-size: 12px }不会影响 shadow 内文字大小 -
!important在 shadow 内部也无效——因为样式计算根本不参与全局层叠 - 支持
::slotted()控制 slot 投影内容样式，::host反向影响宿主元素
注意：@scope 不是它的平替——@scope 仍属全局样式表，只约束选择器匹配范围，不创建 DOM 边界，且对通配符、继承属性完全无感。
data-属性模拟作用域最容易被低估的坑
有人用 <div data-scope="card"> + <code>[data-scope="card"] .title 模拟隔离，看似简单，实则隐患密集：
- 选择器权重飙升：每层嵌套都加
[data-scope]前缀，容易触发Specificity Wars - 无法约束伪类行为：
[data-scope="card"] :hover有效，但[data-scope="card"] ::before仍可能被全局重置覆盖 - v-html 插入的内容不会自动带上
data-scope，样式立即失控 - 动态插入新节点后，必须手动补上
data-scope属性，否则隔离失效 - DevTools 里看不出“作用域”标识，调试时只能靠肉眼比对选择器
真正难的从来不是加个属性，而是让样式行为可预测、可追溯、不随 DOM 动态变化而漂移。
