:scope 仅在 element 实例的 queryselector 系列方法中有效，代表调用该方法的元素本身；在 css 样式表、document.queryselector 或不支持浏览器中无效，解析时被当作 :root，导致样式泄漏。
:scope 只在 Element.prototype.querySelector 和 querySelectorAll 中有效，且严格绑定调用它的那个元素节点；在 CSS 文件、<style></style> 块、document.querySelector 或不支持的浏览器中全部无效。
为什么 :scope 在样式表里完全没用？
CSS 解析阶段没有“当前元素”概念，:scope 被当作 :root 处理，等价于匹配整个文档。写 :scope .item { color: red; } 不会限制作用域，反而可能意外命中全局任意位置的 .item。
常见错误现象：
- 在
<style></style>里定义:scope规则，DevTools 中看不到任何效果 - 以为它能替代
<style scoped></style>或 CSS Modules，结果样式泄漏 - 和 Sass 的
&混淆，误以为是编译时占位符
:scope 在 querySelector 中的真实用法
它唯一合法的场景是：在某个 Element 实例上调用查询方法，且选择器字符串中显式包含 :scope —— 此时它就代表那个实例本身。
典型正确写法：
-
el.querySelector(':scope > .btn')：只找el的直系子级.btn，比el.querySelector('.btn')更精确 -
shadowRoot.querySelectorAll(':scope input[type="text"]')：防止跨 shadow boundary 匹配，比裸写input[type="text"]更安全 -
fragment.querySelectorAll(':scope .item')：在未挂载的DocumentFragment上也能正常工作
⚠️ 注意：document.querySelector(':scope .item') 会静默失败，因为 document 不是 Element 节点，不构成有效作用域上下文。
兼容性与容易踩的坑
Firefox 117+、Chrome 125+、Safari 15.4+ 支持，旧版 Chrome/Firefox 会静默忽略 :scope，不报错也不匹配。
关键边界情况：
-
:scope不可嵌套，:scope :scope .item是非法语法 -
:scope:hover .active合法但无实际意义——:scope不接管 hover 状态，只是起点锚点 - 在
iframe.contentDocument或template.content上调用时，:scope仍指向该子文档或模板内容根，不是顶层 document
真正要依赖局部作用域，别硬套 :scope；它不是样式隔离方案，只是一个运行时显式锚点标记——用错地方，连错误提示都不会给你。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
