scoped 属性从未被浏览器原生支持，而是 vue 编译器的私有指令；vue 3 已彻底移除其解析逻辑，实际样式隔离需依赖 css modules、shadow dom 或 bem 等方案。
scoped 属性在 Vue 2 中曾作为 <style></style> 标签的实验性特性存在，但**它从未进入 HTML 标准，也未被浏览器原生支持**；Vue 3 官方已彻底移除该属性的解析逻辑——不是“被移除”，而是它压根没在浏览器里活过。
为什么scoped从来就不是浏览器功能
scoped 看似写在 HTML 里，实则是 Vue 编译器的私有指令。浏览器遇到 <style scoped></style> 会直接忽略该属性，照样把所有样式注入全局 CSSOM。真正起作用的是 Vue 的构建时处理：自动给组件元素加唯一 data 属性（如 data-v-f3f47522），再重写选择器（.btn → .btn[data-v-f3f47522]）。
- 没有构建工具（如 Vite/Webpack）时，
<style scoped></style>在纯 HTML 文件中完全无效 - 手动复制带
scoped的 style 到普通 HTML，样式照样污染全局 - DevTools 里查不到任何叫 “scoped” 的 CSS 规则或 DOM 行为
@scope 是浏览器原生支持的新语法，但用错就静默失效
Chrome 125+、Safari 17.4+ 支持 @scope，但它不是 scoped 的平替——它不改 HTML 结构，也不加属性，只约束选择器匹配范围。生效前提是 HTML 和 CSS 两侧严格对齐：
- 必须有真实 DOM 节点带
scope或scope-start属性（不是 class！） - CSS 中
@scope (article[scope])必须能精确匹配该节点，写成@scope (.article)就跳过整条规则 - 动态 JS 插入带
scope的元素后，已加载的@scope规则不会重新计算 - 不报错、不警告、不渲染——你只能靠检查目标元素是否命中规则来验证
真正落地可靠的样式隔离方案
别卡在“原生”执念上。实际项目中，以下方案更可控、更易调试、兼容性更好：
- CSS Modules：
Button.module.css+ 构建工具自动哈希类名，零配置即隔离，React/Vue/Vite 原生支持 - Shadow DOM：
element.attachShadow({ mode: 'open' })创建真实 DOM 边界，外部样式默认进不去，内部样式默认出不来（注意可继承属性仍会穿透） - BEM 命名：
.card__title+ 统一前缀，不依赖工具，适合静态页或老项目，但需团队守规 - 自定义元素 +
v-html配合 sanitizer：若必须动态插入 HTML，先用 DOMPurify 过滤 script 标签，再注入到 Shadow DOM 内
最常被忽略的一点：@scope 不阻止全局通配符（如 body * { font-size: 12px }）影响其内部文字大小，它只管“选择器是否匹配”，不管“样式是否生效”。真正的隔离必须靠 DOM 边界（Shadow DOM）或构建时重写（CSS Modules），而非单纯语法糖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
