:scope仅在特定上下文（如shadow root、DocumentFragment）或支持{scope:true}的浏览器中生效，否则默认指向document；直接在普通元素上调用querySelector(':scope...')通常无效，推荐使用el.querySelector()等兼容方案。
什么是 :scope，它真能限定查找范围？
:scope 不是万能的“局部作用域开关”，它只在 querySelector()、querySelectorAll() 等 DOM 查询方法中生效，且**仅当调用时显式传入 scope 参数（如 el.querySelectorAll(selector, { scope: true })）才起作用**——但注意：目前（截至 2024 年底）Chrome 124+ 和 Safari 17.4+ 才支持 { scope: true } 选项，Firefox 尚未实现。所以现实中，:scope 几乎只在 DocumentFragment 或 attachShadow 的上下文中自然生效，比如：
const frag = document.createDocumentFragment();<br>frag.innerHTML = `<div><p class="target">text</p></div>`;<br>frag.querySelector(':scope > div > p'); // ✅ 匹配成功
:scope 在 querySelector 中为何常“失效”？
直接写 el.querySelector(':scope .child') 通常不按预期工作，因为：
-
:scope默认指向整个文档（document），除非查询发生在有明确作用域的上下文里（如 shadow root 或 fragment） - 即使
el是某个元素，:scope也不会自动变成它——这是最常见误解 - 没有
{ scope: true }支持时，浏览器会把:scope当作无效伪类忽略（或报错）
el 为根查子元素，老老实实用 el.querySelector('.child') 更可靠。
哪些场景下 :scope 能稳定起作用？
目前真正可用的场景有限，但明确有效：
- 在
shadowRoot.querySelector(':scope > slot')中，:scope指向该 shadow root 本身 - 在
document.querySelector(':scope .modal')中，:scope指向document（等价于省略） - 在
template.content.querySelector(':scope li')中，:scope指向template.content（即 DocumentFragment） - 使用
el.querySelectorAll(selector, { scope: true })（仅 Chromium/Safari 新版）
const tmpl = document.querySelector('template');<br>const frag = tmpl.content;<br>frag.querySelector(':scope > ul > li:first-child'); // ✅ 安全，:scope 就是 frag
替代方案比硬扛 :scope 更实际
如果你只是想“从某个元素开始查”，别依赖 :scope 兼容性：
- 用
el.matches(selector)判断自身是否匹配 - 用
el.querySelector(selector)查后代（默认行为就是以el为根） - 用
el.closest(selector)往上找最近祖先 - 需要严格子代？写
el.children[0].matches('p') ? el.children[0] : null或用el.querySelector('> p')（CSS 中>已隐含父级约束）
:scope 的复杂嵌套模板逻辑，目前仍建议搭配 DocumentFragment 或等待 { scope: true } 成为主流。立即学习“前端免费学习笔记（深入）”；
