:scope 只在 Element.prototype.querySelector 中生效且指向调用元素自身；document.querySelector(':scope .btn') 会静默失败，因 document 非元素节点；正确用法如 root.querySelector(':scope > .item')。
在 JS 的 querySelector 中用 :scope 定位调用元素自身
:scope 不是 CSS 文件里的普通伪类，它只在 Element.prototype.querySelector 和 querySelectorAll 方法中生效，且始终指向调用该方法的那个 DOM 元素节点。
常见错误是写 document.querySelector(':scope .btn')——这会静默失败，因为 document 不是元素节点，不构成有效作用域上下文。
- ✅ 正确：
root.querySelector(':scope > .item')，其中root是一个<div>或其他已挂载的元素节点 - ❌ 错误：
document.querySelectorAll(':scope p')，浏览器直接忽略整条选择器（无报错、无警告） - ⚠️ 注意：旧版 Chrome（:scope，不匹配也不提示
别在全局样式里写 :scope —— 它不会限制作用域
你在 <style> 标签或外部 CSS 文件里写 :scope .title { color: blue; }，实际效果等同于 .title { color: blue; }，甚至可能意外匹配到文档任意位置的 .title。
原因很简单：CSS 解析阶段没有“当前元素”概念，:scope 被当作 :root 处理，也就是整个文档根节点。
立即学习“前端免费学习笔记（深入）”；
- ❌ 不要指望它替代 Vue 的
<style scoped>或 CSS Modules - ❌ 不要把它和预处理器里的
&混淆：&.active是编译时拼接，:scope.active是运行时动态绑定 - ✅ 真实用法：封装查询函数时避免硬编码父选择器，比如
findButtons(container) { return container.querySelectorAll(':scope button'); }
@scope 规则 + :scope 伪类：Chrome 125+ 专属实验功能
目前只有 Chrome 125+ 默认支持 @scope，Firefox 和 Safari 完全不支持，且不提供启用开关。它不是渐进增强特性，而是“有或没有”的硬分界。
哪怕写了 @scope (.card) { :scope { border: 1px solid #ccc; } }，若对应 HTML 缺少 scope 属性（注意：是 attribute，不是 class），整条规则会被浏览器静默丢弃，DevTools 里也看不到任何提示。
- ✅ 必须配对：
<div class="card" scope>才能触发@scope (.card) - ❌
<div class="card scope>或<div class="card" data-scope>都无效 - ⚠️
to边界语法极脆弱：写@scope (article[scope]) to (footer)，必须确保每个匹配的article内部真实存在<footer>，否则规则失效
真正需要局部样式隔离？用更稳的方案
:scope 和 @scope 都不是生产环境可用的样式隔离手段。它们语义清晰，但落地条件太苛刻：依赖特定浏览器版本、特定 HTML 属性、特定插入时机。
Vue 的 <style scoped> 是编译期静态隔离，通过为元素添加 data-v-xxx 属性并重写选择器实现，稳定、可预测、全平台兼容；而 :scope 在 JS 查询中只是语义辅助，@scope 则几乎只存在于 Chrome 实验室里。
最容易被忽略的一点：你写的 :scope 选择器在 DevTools 里看起来“生效了”，其实只是浏览器把无效部分当空规则跳过——它既不报错，也不提醒你环境不支持。
