@scope目前仅Chrome 125+支持，Firefox和Safari完全不支持；生效需HTML元素显式含scope布尔属性（非class或data-scope），且to边界语法要求匹配的终止元素必须存在，否则整条规则静默失效。
@scope 目前只在 Chrome 125+ 中可用，Firefox 和 Safari 完全不支持，且无法通过 flag 启用 —— 别在生产环境或跨浏览器项目里依赖它。
为什么 @scope(.card) { h2 { color: red; } } 没生效？
最常见原因是 HTML 中缺少 scope 属性。@scope 规则不是“匹配类名就生效”，它要求对应 DOM 元素显式携带 scope 这个布尔属性（注意：不是 data-scope，也不是 class="scope"）。
- ✅ 正确：
<div class="card" scope><h2>Title</h2></div> - ❌ 无效：
<div class="card scope">...（scope是 class，不是属性） - ❌ 无效：
<div class="card" data-scope>...（必须是原生scope属性） - ❌ 无效：
<div class="card" scope="true">...（布尔属性不能带值）
DevTools 不会报错，也不会显示该规则，整条 @scope 块会被静默丢弃。
@scope to(...) 边界语法为何突然失效？
to 表示作用域的终止边界，但它要求“每个匹配的作用域根内，必须存在至少一个匹配的边界元素”。这个条件非常严格，且不回退、不容错。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效：
@scope (.section) to (.end) { p { color: green; } }+<div class="section"><p>...</p><footer class="end"></footer></div> - ❌ 失效：
<div class="section"><p>...</p></div>（没写.end，整条规则被忽略） - ❌ 失效：
<div class="section"><div class="end-wrapper"><footer class="end"></footer></div></div>（.end必须是直接后代或可被选择器匹配到的同级/子级，深度嵌套易断链）
它不像 JavaScript try/catch 那样有 fallback；不满足条件，样式就完全不应用。
:scope 在 @scope 规则里能干什么？
:scope 在 @scope 块内部是合法的，但它只代表“当前作用域根元素自身”，不是子元素占位符。
- ✅ 可用：
@scope (.form) { :scope { display: grid; gap: 16px; } input { border: 1px solid #ddd; } }→ 给.form[scope]元素设 grid 布局 - ⚠️ 注意：
:scope input等价于.form[scope] input，不是“仅限第一层 input”——它仍会匹配所有后代input - ❌ 不能替代嵌套：
@scope (.card) { & .title { ... } }会报语法错误，CSS 不支持&在@scope内使用
它唯一确定的语义就是“作用域根节点”，别指望它做类似 Sass 的嵌套展开。
真正要落地局部样式隔离，现在更稳的选择仍是 CSS Modules、Shadow DOM 或构建时 scoped（如 Vue 的 <style scoped>）。@scope 是个好主意，但目前只是 Chrome 实验室里的一个原型，离“可用”还差一个完整生态和跨浏览器共识。
