@scope规则需DOM中存在带scope属性的元素才能生效，否则静默失效；to边界必须真实存在且为简单选择器；:scope仅在@scope块内指代根元素。
@scope 目前不能在生产环境直接用，写了也不生效——不是你代码错，是浏览器根本没执行它。
为什么 @scope (.card) { } 完全没反应
浏览器不会报错、不警告、不渲染，整条规则被静默跳过。核心原因只有一个：DOM 中没有带 scope 属性的元素匹配该选择器。
-
@scope (.card)要求对应 HTML 是<div class="card" scope></div>，写成<div class="card"></div>就失效 -
@scope (section[scope])必须对应<section scope></section>，不是<section class="scope"></section>，也不是<section data-scope></section> - JS 动态插入带
scope的节点后，已加载的@scope规则不会重解析——得手动调用CSSStyleSheet.replace() - DevTools Elements 面板里看不到任何高亮或折叠提示，只能靠检查目标元素的 computed styles 是否命中
@scope to 的边界必须真实存在且为简单选择器
to 不是“作用到哪里为止”，而是“从这个节点起（含自身及后代）全部排除”。它不找“最近的”，只认“真实存在的第一个匹配节点”。
-
@scope (article[scope]) to (footer)要求 DOM 中同时存在<article scope>...<footer></footer>...</article>，缺一个就整条规则失效 -
to后只接受简单选择器：footer、#end、.stop、[data-end]；不支持:nth-child(2)、.sidebar[data-active]、header + section - 省略
to更安全：@scope (section[scope]) { p { color: blue; } }天然覆盖整个子树，无需额外约束 - 动态插入
footer后，样式不会自动生效——已解析的规则不会回溯重算
:scope 伪类只在 @scope 块内有效，且只指根元素本身
:scope 不是通用选择器，单独写 :scope { color: red; } 没实际意义；它只在 @scope 块内部起作用，语义明确：就是那个带 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更清晰 -
:scope在@scope块外使用不可靠，尤其在表格、表单或 Shadow DOM 外的普通文档流中行为不一致
真正容易被忽略的是：@scope 不是语法糖，它是 HTML attribute 和 CSS 选择器的双向硬绑定；只要有一端不匹配，整条规则就被丢弃——而你完全收不到任何反馈。
