chrome 125以下、firefox 117以下、safari 17.4以下均静默忽略@scope规则，不报错也不降级；无polyfill，需用传统类选择器或postcss展开兜底。
Chrome 125 以下版本直接忽略 @scope 规则
不是报错，也不是降级为其他行为，而是整个 @scope 块被浏览器当作无效 CSS 忽略掉——里面所有样式都不生效。这意味着你写的 @scope(.card) { h2 { color: red; } } 在 Chrome 124 或更早版本中，h2 根本不会变红，且控制台无任何提示。这不是 bug，是规范要求的“静默忽略”。
Firefox 117 和 Safari 17.4 是兼容分水岭
Firefox 从 117 开始稳定支持 @scope，Safari 则要等到 17.4（2026 年初发布）。低于这些版本的用户，同样遭遇静默忽略。特别注意 Safari 17.3 及更早版本——即使你用 to() 显式声明边界，也不会触发警告或 fallback，样式就是不出现。
验证方法很简单：在目标浏览器中打开开发者工具 → Elements 面板 → 找到作用域根元素（如 <div class="card">）→ 查看 Computed 样式里是否应用了 <code>@scope 内定义的规则。没出现，基本可判定不支持。
没有 polyfill，只能用渐进增强策略兜底
@scope 是原生解析机制，依赖浏览器 CSS 引擎深度参与，目前没有任何 JS polyfill 能模拟其行为。强行用 JS 查询 DOM 并动态加类，既破坏性能，也无法复现 to() 的边界穿透逻辑。
实际可行的降级路径只有两条：
- 保留
@scope作为现代浏览器的主样式，同时在外部写一份传统类前缀样式（如.card h2、.card .content），确保旧浏览器有基础表现 - 用构建时工具（如 PostCSS）将
@scope自动展开为等效选择器：把@scope(.card) { h2 { ... } }编译成.card h2 { ... }，再通过:is()或:where()控制优先级（注意:where本身需 Chrome 88+）
Ant Design 用户可结合 <styleprovider hashpriority="high"></styleprovider> 关闭 :where 封装，避免双重降级带来的优先级混乱。
to() 边界在不支持环境中完全失效，别依赖它做逻辑判断
to() 是 @scope 最易误用的部分。在不支持的浏览器里，不仅 @scope 块被忽略，连 to(.end) 这个语法本身也不会触发任何 fallback 行为——它就不存在。所以不要在 JS 中检查是否存在 to() 来决定是否启用某功能，那会永远返回 false。
真正需要边界控制的场景（比如防止嵌套卡片样式穿透），必须用显式类名隔离，例如给子组件加 class="card__nested"，并在 CSS 中写 .card > :not(.card__nested) h2 这类防御性选择器。
现代 CSS 作用域能力很干净，但它的“干净”只存在于支持它的环境里；一旦离开这个范围，就得靠老办法兜底——不是技术退步，而是 Web 兼容性的日常。
