:scope仅在JavaScript调用querySelector等API时以调用元素为基准生效，CSS样式表中无效；它明确限定选择范围从当前元素出发，提升可读性与安全性。
:scope 不是全局查找工具，它只在调用它的 API 明确设定了「基准元素」时才生效。直接在样式表里写 :scope p 不会匹配任何元素——这是最常见的误解起点。
为什么 :scope 在 CSS 文件里基本没用？
:scope 的语义依赖于「当前作用域根」，而标准 CSS 样式表没有运行时上下文。只有通过 JavaScript 方法（如 querySelector、querySelectorAll）在某个元素上调用时，该元素才成为 :scope 所指代的对象。
- ❌ 错误用法：
/* 这段规则永远不会生效 */\n:scope .item { color: red; } - ✅ 正确前提：必须配合 JS 调用，例如
el.querySelectorAll(':scope .item')，此时:scope指的就是el - 浏览器兼容性注意：Firefox 55+、Chrome 63+、Safari 15.4+ 支持；旧版 Safari 和 IE 完全不支持
:scope 在 querySelector 中的实际价值
它让选择器更清晰地表达「从当前元素出发」的意图，尤其在嵌套遍历时避免意外匹配到祖先节点。
- 对比：
el.querySelector('.btn')可能匹配到el内部任意层级的.btn，但若想「只找直接子级的.btn」，过去得写el.querySelector('> .btn')或el.children[0].classList.contains('btn')... - 用
:scope更直观：el.querySelector(':scope > .btn')—— 明确限定为el的直系子元素 - 特别适合动态组件封装：比如一个自定义元素内部要查找自身模板里的控件，
this.shadowRoot.querySelector(':scope input[type="text"]')比硬写this.shadowRoot.querySelector('input[type="text"]')更安全，防止跨 shadow boundary 匹配
容易被忽略的边界情况
:scope 不等于 :root，也不等价于给元素加个临时 class 再查——它的作用范围严格绑定于调用它的那个 DOM 节点，且不可继承、不可嵌套。
立即学习“前端免费学习笔记（深入）”；
- ⚠️ 注意层级穿透：
el.querySelectorAll(':scope div span')会匹配el内所有后代中的span，只要路径满足div→span；但:scope本身只锚定起点，不限制中间层级 - ⚠️ 不支持伪类链式调用：
:scope:hover .active是合法语法，但实际效果等同于.active在:hover元素内部——:scope并不接管 hover 状态，它只是占位符 - ⚠️ 在
DocumentFragment或未挂载节点上调用时，:scope仍有效，但结果取决于 fragment 内部结构，和文档流无关
真正要用好 :scope，得把它看作一种「显式锚点标记」，而不是选择器增强功能。它的存在意义在于让代码意图可读、边界可控，而不是帮你省几行字符。
