@scope 目前不可用于生产环境，Chrome 125+ 默认启用但静默失效，Firefox/Safari 完全不支持；它强依赖 HTML 的 scope/scope-start 属性与 CSS 选择器严格配对，非语法糖，且需真实 DOM 节点作为作用域起点。
@scope 目前不能在生产环境直接用，Chrome 125+ 默认启用但静默失效，Firefox/Safari 完全不支持；它不是“写了就生效”的语法糖，而是强依赖 HTML attribute 与 CSS 选择器严格配对的实验性机制。
为什么写了 @scope (.card) { } 却完全没效果
浏览器不会报错，也不会警告，只会整条规则跳过——因为 @scope 不是选择器，它需要一个真实 DOM 节点作为作用域起点，且该节点必须带 scope 或 scope-start 属性（注意：是 HTML attribute，不是 class 名）。
-
@scope (.card) { h2 { color: red; } }要求对应 HTML 是<div class="card" scope></div>，写成<div class="card"></div>就无效 - 用属性选择器时，
@scope (section[scope])必须匹配<section scope></section>，不能写成@scope (section.scope)（那是类名，不是属性） - DevTools Elements 面板里看不到 scoped 样式被折叠或高亮，只能手动检查目标元素的 computed styles 是否命中
@scope 的 to 边界必须是真实存在的后代节点
@scope (article[scope]) to (footer) { p { color: blue; } } 这种写法只有当 DOM 中**同时满足两个条件**时才生效：① 存在 <article scope></article>；② 该 article 内部存在一个匹配 footer 的元素（如 <footer></footer>）。缺一不可，否则整条规则静默失效。
-
to后只接受简单选择器：footer、#end、.stop、[data-end]，不支持伪类（如:nth-child(2)）、复合选择器（如.sidebar[data-active]）或关系选择器（如header + section） - JS 动态插入
footer后，已解析的@scope规则不会重计算——得用CSSStyleSheet.replace()手动触发样式表重载 - 绝大多数场景下，省略
to更安全：作用域天然覆盖scope元素及其全部子树，无需额外约束
:scope 伪类只在 @scope 块内有效，且仅指向根元素本身
:scope 不是全局选择器，单独写 :scope { color: red; } 没实际意义；它只在 @scope 规则块内部起作用，且语义明确：代表当前作用域的起点元素。
立即学习“前端免费学习笔记（深入）”；
-
@scope (.card) { :scope { border: 1px solid #ccc; } }→ 给每个带scope属性的.card加边框 -
@scope (article[scope]) { :scope > h2 { margin-top: 0; } }→ 只影响该article的直接子<h2>，不影响其他article - 别写
:scope .title来选子元素——冗余且低效，直接写.title更清晰
现在更可靠的替代方案是什么
除非你明确需要无构建、纯 HTML/CSS 的原生作用域控制（比如嵌入第三方静态页、或规避 JS 框架），否则以下方式落地更稳：
-
CSS Modules：Vite/Webpack 默认支持
Button.module.css，类名自动哈希，JS 中按引用注入，零配置即隔离 -
Vue/Svelte 的
<style scoped>：框架自动给元素加data-v-xxx属性，并重写选择器为.btn[data-v-xxx]，开发体验最顺 -
BEM 命名 + 唯一类前缀：如
.user-card__title，不依赖工具，适合老项目或 SSR 场景，但靠人守规范 -
ID 前缀锁定（慎用）：如
#user-card .title，权重高、难覆盖，仅适用于单实例页面区块
真正容易被忽略的是：@scope 规则隐含了对 HTML 结构的强约束——它不是“让样式局部化”，而是“要求 DOM 必须按特定方式标记”。一旦 JS 动态渲染、服务端模板未同步、或 SSR/CSR 不一致，@scope 就会彻底失效，且毫无提示。
