@scope 目前仅 chromium 支持，firefox 和旧版 safari 完全不支持，无法通过 @supports 检测或工具转译，生产环境必须依赖命名空间前缀实现样式隔离。
@scope 目前不能在 Firefox 和旧版 Safari 中使用，强行引入等于放弃约 45% 的真实用户；命名空间前缀（如 .myapp-card）仍是跨浏览器最稳的兜底方案。
为什么 @scope 在 Firefox 中完全不可用
截至 2026 年 5 月，Firefox 官方仍未实现 @scope。Can I Use 数据显示其支持状态仍为「No support」，且 Mozilla 开发者邮件列表中未见明确排期。这意味着：即使你写了 @scope(.card) { button { color: red; } }，Firefox 会直接忽略整条规则，不报错、不警告、也不降级——样式就“消失”了。
- 不是渲染 bug，是语法不识别：解析器遇到
@scope就跳过，后续选择器不会被注入或重写 - 无法通过
@supports检测：CSS 不支持对 at-rule 做特性查询，@supports (selector(:is(*)))之类也无效 - 构建工具（如 PostCSS）目前无成熟插件能安全转译
@scope，因为语义涉及 DOM 结构边界，静态分析极易出错
命名空间前缀不是“倒退”，而是可控的隔离手段
给类名加统一前缀（如 .billing-form__submit 或 .dashboard-card）不是妥协，而是把作用域控制权从浏览器移交到开发者手中，且完全可预测。
- 避免 BEM 式冗长：不必强制
.block__element--modifier，用.payment-card+.payment-card-header足够清晰 - 配合构建工具自动注入：Vite / Webpack 的
css-loader可配modules.localIdentName生成带前缀的哈希类名，例如.payment-card_abc123 - 第三方库样式也能覆盖：只要你的前缀足够唯一（比如带团队/项目缩写
.acme-payment-card），就能避开.card类与 Bootstrap/Material UI 的冲突
混用 @scope 和命名空间时的典型陷阱
有人想“渐进增强”：先写 @scope，再 fallback 到带前缀的全局规则。但实际中极易翻车。
- Chromium 里
@scope生效，但带前缀的全局规则也同时生效 → 样式重复应用，可能触发意外层叠（比如两次margin-top: 16px） - 开发者误以为
@scope会自动阻止外部样式穿透，结果发现body .payment-card button仍能覆盖内部按钮，因为@scope不改变选择器权重 - 构建后 CSS 文件体积反而增大：同一组件既输出
@scope规则，又保留 fallback 规则，且无法 tree-shake
真正要落地样式隔离，得接受一个事实：原生 @scope 当前只适合 Chromium-only 内部工具或实验页；所有面向公众的生产系统，仍需靠命名空间前缀 + 构建时类名管控来守住底线。浏览器兼容性不是“等一等就来了”的问题，而是现在就得做取舍的设计决策。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
