scoped属性已完全失效，w3c标记为obsolete；现代浏览器均忽略它，样式仍全局生效，替代方案应选组件化、唯一class、iframe或postcss前缀。
scoped 属性在现代浏览器中基本不可用
它只在旧版 Firefox（约 2012–2017 年间）中短暂支持，之后被移除。Chrome、Safari、Edge、Firefox 当前稳定版全部不识别 scoped 属性——哪怕你写了 <style scoped></style>，浏览器也会直接忽略该属性，样式仍全局生效。
这不是“部分兼容”，而是“完全失效”。W3C 已明确弃用该特性，HTML 标准文档中已将其标记为“obsolete”。如果你在控制台检查 DOM，会发现 style.scoped 返回 undefined，style.hasAttribute('scoped') 虽为 true，但无任何样式隔离效果。
为什么不能靠 JS 模拟 scoped 行为
有人尝试用脚本扫描 <style scoped></style>，给父元素加随机属性，再重写选择器（比如把 h1 改成 [data-scope-abc123] h1），这条路理论上可行，但实际踩坑密集：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 动态插入的
<style scoped></style>（如通过innerHTML或框架渲染）容易漏处理 - CSS 中的伪类、伪元素（
:hover、::before）、属性选择器（[disabled]）重写逻辑复杂，极易出错 - @media、@supports 等规则嵌套时，作用域前缀需逐层注入，现有工具链（如 PostCSS 插件）也难以全覆盖
- 若页面用了 Shadow DOM，
scoped模拟反而和原生封装冲突，样式优先级混乱
替代方案要按场景选，别硬套
真正需要局部样式的场景，有更成熟、可维护的解法：
- 组件化开发（Vue/React）：直接用
<style scoped></style>（Vue）或 CSS Modules（React），这是构建时处理，不是运行时 hack - 纯静态页或老项目改造：给容器加唯一 class（如
<div class="widget-news">），所有样式写成 <code>.widget-news h1、.widget-news p—— 简单、可控、全兼容 - 需要强隔离：用
iframe包裹子内容，样式天然不泄漏，适合嵌入第三方模块或富文本编辑区 - 构建流程存在时：用 PostCSS 插件（如
postcss-prefix-selector）自动添加作用域前缀，比手动维护 class 更可靠
别在 HTML 中写 scoped，除非明确测试过目标环境
即使你只面向 Firefox 用户，也要注意：Firefox 自 69 版（2019 年）起已彻底移除 scoped 支持。现在任何主流浏览器里写 <style scoped></style>，都只是多敲了 7 个字符的无效代码。它不会报错，也不会警告，但会让接手的人误以为“这里做了样式隔离”，结果调试时发现样式污染，徒增排查成本。
真正容易被忽略的点是：scoped 的语义诱惑太强——“我只想管这一块”，但浏览器没提供对应能力，就得用显式、可验证的手段代替隐式、已废弃的声明。
