scoped属性已从html规范中删除，主流浏览器不再支持，实际无作用域限制效果，应删除并改用css modules、shadow dom或bem等真正有效的样式隔离方案。
scoped 属性在当前主流浏览器中已基本不可用——它被移除、不推荐使用，且现代项目中不应依赖它实现样式隔离。
为什么 scoped 不能用了
该属性虽曾是 HTML5 提案的一部分，但从未被 Chrome、Firefox、Safari 等主流引擎稳定实现。W3C 后来将其从规范中删除，各浏览器也陆续停止支持或仅保留残缺行为（如仅对静态 HTML 生效）。2026 年的实测表明：<style scoped></style> 在所有新版本浏览器中均无实际作用域限制效果。
- 即使写上
scoped，样式仍会全局生效（尤其在动态插入节点后） - DevTools 中无法看到任何作用域标记或隔离标识
- Vue 等框架早期的
<style scoped></style>是编译时模拟，并非原生 HTML 行为
scoped 和 CSS Modules、Shadow DOM 的关键区别
原生 scoped 是声明式、运行时无效的；而真正可用的样式隔离需主动构建：
-
CSS Modules：构建时重命名类名（如.button→.Button_button__xyz123），靠类名唯一性隔离 -
Shadow DOM：用element.attachShadow({mode: 'open'})创建封闭 DOM 树，其内<style></style>天然不泄漏 -
BEM或CSS-in-JS：靠命名约定或运行时注入 + 哈希键控制作用域
三者都和 <style scoped></style> 无关——后者既不参与构建流程，也不触发 Shadow Root 创建。
如果旧代码里还留着 scoped，要不要删
要删。它不仅没用，还会造成误导：
- 新人可能误以为样式已被隔离，结果改出全局污染
- 某些构建工具（如 Vite 插件）会报
Unknown attribute "scoped"警告 - HTML 验证器（如 W3C Validator）会标记为过时属性
- 若配合
type="text/css"使用，scoped还会干扰部分 SSR 渲染逻辑
真正需要局部样式的场景，应直接迁移到 <style></style> + BEM 类名，或组件级 Shadow DOM 封装。
记住：样式作用域不是加个属性就能自动生效的事，它必须由构建流程、DOM 结构或运行时机制显式保障——scoped 什么也没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
