@scope 目前不可用于生产环境，chrome 125+ 默认启用但静默失效，firefox/safari 不支持；它依赖 html 的 scope 或 scope-start 属性与 css 选择器严格匹配，非 class 名匹配，且不支持嵌套、动态重计算或 devtools 可视化。
@scope 目前不能在生产环境直接用，Chrome 125+ 默认启用但静默失效不报错，Firefox/Safari 完全不支持。它不是“写了就能生效”的语法糖，而是依赖 HTML attribute + CSS 选择器双向严格匹配的实验性机制。
为什么写了 @scope(.card) 却完全没效果
浏览器不会报错，只会整条规则跳过——因为 @scope 不是选择器，它需要真实 DOM 节点作为作用域根，且必须带 scope 或 scope-start 属性（不是 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)（那是类名，不是属性） - JS 动态插入带
scope的元素后，已解析的@scope规则不会重新计算；得手动调用CSSStyleSheet.replace()或重载样式表 - DevTools Elements 面板里看不到 scoped 样式被折叠或高亮，只能靠检查目标元素 computed styles 是否命中
@scope 的边界定义必须一一对应
它不是独立容器，而是绑定关系：HTML 中必须出现 scope 或 scope-start 属性节点，CSS 中的 @scope 第一个参数必须能精确匹配该节点。
- 合法起点：
<main scope-start></main>→ 对应@scope ([scope-start]) - 合法起点：
<article scope></article>→ 对应@scope (article[scope]) - 不支持嵌套
@scope块（规范明确禁止） -
to <limit></limit>是可选终点，但<limit></limit>必须是 scope-root 的真实后代节点，DOM 中不存在就失效
现阶段更可靠的替代方案
除非你明确需要无构建、纯 HTML/CSS 的原生作用域控制，否则以下方式落地更稳：
-
CSS Modules：Vite/Webpack 默认支持
Button.module.css，类名自动哈希，JS 中按引用注入，零配置即隔离 -
Vue/Svelte 的
<style scoped></style>：框架自动加data-v-xxx属性并重写选择器，开发体验最顺 -
BEM 命名 + 唯一类前缀：如
.user-card__title，不依赖工具，适合老项目，但靠人守规范 -
ID 前缀锁定（慎用）：如
#user-card .title，权重高、难覆盖，仅适用于单实例区块
真正容易被忽略的是：你写的每一条 @scope 规则，都隐含了对 HTML 结构的强约束——它不是“让样式局部化”，而是“要求 DOM 必须按特定方式标记”。一旦 JS 动态渲染、服务端模板未同步、或 SSR/CSR 不一致，就彻底失效。这种耦合比 class 名冲突更隐蔽，也更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
