:scope只在element.prototype.queryselector/all方法中有效，且仅指向调用者自身；在css文件、style标签、document.queryselector或不支持浏览器中均无效。
为什么 :scope 看起来没效果？
因为浏览器默认不把元素自身设为 :scope 的上下文 —— 它只在 querySelector()、querySelectorAll() 这类方法中生效，且必须显式传入 { scope: true }（仅 Safari 支持）或靠 Element.prototype.querySelector 的隐式作用域。直接写在 CSS 文件里或 style 标签中，:scope 就是无效的。
- 常见错误现象：
div { color: red; } :scope span { font-weight: bold; }在全局样式中完全不生效 - 真正可用场景：只在 JS 调用
element.querySelector(':scope > .item')时，:scope指向element自身 - Chrome / Firefox 目前仅支持
querySelector系列中的:scope，不支持document.querySelector(':scope p')（因为document不是元素节点） - Safari 是唯一支持
{ scope: true }选项的浏览器，但该选项目前仍是实验性 API，不能依赖
:scope 和 this 或 & 不是一回事
:scope 不是 CSS 预处理器里的嵌套占位符，也不等价于 JS 里的 this；它是一个运行时动态绑定的选择器锚点，只在查询执行那一刻确定上下文元素。
- 对比
&（Sass/Less）：&.active { color: blue; }是编译时拼接，而:scope.active是运行时匹配调用者自身 - 不能替代
element.matches(':scope.active')中的:scope—— 这里它确实有效，但matches()本身已可直接传字符串，:scope只是让逻辑更显式 - 注意兼容性陷阱：Firefox 117+、Chrome 125+ 才稳定支持
:scope在querySelector中的行为；旧版本会静默忽略
实际能用 :scope 解决什么具体问题？
它最实在的价值，是在封装可复用的 DOM 查询逻辑时，避免硬编码父容器选择器或重复传参。
- 使用场景：自定义 hook 或组件方法中做局部查询，比如
function findControls(root) { return root.querySelectorAll(':scope .control'); } - 比
root.querySelectorAll('.control')更安全 —— 后者可能意外匹配到root外部同名元素（如果root是片段或未挂载节点，行为不一致） - 参数差异：不需要额外传入
root两次，:scope让选择器语义自带“从这里开始” - 性能无增益：它不加速查询，只是语义清晰；V8 和 Gecko 都把它当作普通伪类处理，无特殊优化
别在这些地方硬塞 :scope
强行在不支持的环境里用，只会让代码变脆弱，还掩盖真实问题。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件或
<style></style>块里写:scope：全部无效，白写 -
document.querySelector(':scope div')：抛DOMException: Failed to execute 'querySelector' on 'Document': ':scope' is not a valid selector - 和
:host混用（如 Shadow DOM）：两者机制不同，:scope不自动穿透 shadow boundary，也不会变成 host 元素 - 期望它解决 CSS 模块化问题：它不是 scoped style，不隔离样式，只影响 JS 查询范围
真正关键的点就一个：它只活在 Element.prototype.querySelector[All] 的调用链里，而且只认调用者自身 —— 离开这个上下文，:scope 就是段被忽略的字符。
