chrome 125+ 支持 @scope，但需配合真实 scope 属性；firefox 和 safari 完全不支持；@scope 规则无对应 scope 元素时会被忽略。
Chrome 125+ 中 @scope 能用，但必须配真实 scope attribute
现在（2026 年中）@scope 仅在 Chrome 125 及以上默认启用，Firefox 和 Safari 完全不支持，连 flag 都没得开。别想跨浏览器兼容——它目前就是 Chrome 实验室里的玩具。
最关键的是：@scope 规则不会凭空生效。你写 @scope (.card) { ... }，浏览器会直接忽略整条规则，除非 DOM 中真有带 scope 属性的元素匹配它。
-
<div class="card" scope>...</div>✅ 匹配@scope (.card) -
<section scope-start>...</section>✅ 匹配@scope (section[scope-start]) -
<div class="card">...</div>❌ 没scope属性，规则静默失效 -
<div class="scope">...</div>❌.scope是 class，不是 attribute，不匹配[scope]
:scope 伪类只在 @scope 块内有效，且只能指代该块的根元素
:scope 不是全局选择器。它在 @scope 外面单独写（比如 :scope { color: red; }）基本没用——此时它退化为类似 :root 的行为，实际效果不可靠、不一致，尤其在表格或 Shadow DOM 外的普通文档流里。
它的真正价值，是在 @scope 块内部精准选中那个“被标记为作用域起点”的元素本身：
-
@scope (.card) { :scope { border: 1px solid #ccc; } }→ 给每个<div class="card" scope> 加边框 <li> <code>@scope (article[scope]) { :scope > h2 { margin-top: 0; } }→ 只影响该 article 的直接子<h2></h2>，不波及其他 article - 不能写
:scope .title来选子元素——那是冗余的，直接写.title更清晰、更高效 - 检查 DevTools 的 Elements 面板：确认目标元素上确实存在
scope或scope-startattribute（不是 class，不是 data-*） - CSS 必须在 DOM 就绪前加载完成；如果用 JS 动态插入带
scope的元素，@scope规则已解析完毕，不会重新计算 - 浏览器对无效
@scope块零提示：不报错、不警告、不渲染——它就当那几行 CSS 不存在 - 避免嵌套
@scope：当前规范不支持，写了也无效
常见失效原因：DOM 插入时机 & 浏览器静默丢弃
写了 @scope 却完全没样式？大概率不是语法错，而是浏览器压根没认出 scope root。
别把它当 BEM 或 CSS-in-JS 的替代品
现在用 @scope + :scope 写组件样式，等于主动放弃 Safari 用户、大部分移动端 WebView、以及所有旧版 Chrome。它解决不了“样式隔离”的工程问题，只提供一个未来可能的方向。
真正要落地，还是得靠成熟方案：class 命名约定（BEM）、CSS Modules 的编译时作用域、或 CSS-in-JS 的运行时封装。而 @scope 目前唯一稳妥的用途，是 Chrome 内部工具、原型演示，或你自己可控的实验环境里验证概念。
记住：它不是“写完就能跑”，而是“写完还得查 DOM、盯浏览器版本、绕开所有动态插入逻辑”。
