:scope只在element.prototype.queryselector/all中有效，指向调用该方法的元素节点；document.queryselector(':scope...')会静默失败，因document无作用域上下文。
在 JS 的 querySelector 中用 :scope 定位调用元素自身
:scope 在 CSS 文件或 <style></style> 标签里完全不生效，它只在 Element.prototype.querySelector 和 querySelectorAll 方法中起作用，且始终指向调用该方法的那个 DOM 元素。
常见错误是写 document.querySelector(':scope .btn') —— 这会静默失败，因为 document 不是元素节点，不构成有效作用域上下文。
- ✅ 正确：
root.querySelector(':scope > .item')，其中root是一个<div> 或其他元素节点 <li>❌ 错误： <code>document.querySelectorAll(':scope p')，浏览器忽略整条选择器（无报错） - ⚠️ 注意：旧版 Chrome（:scope 的选择器，不匹配也不提示
- ❌ 不要指望它替代 Vue 的
<style scoped></style>或 CSS Modules - ❌ 不要把它和预处理器里的
&混淆：&.active是编译时拼接，:scope.active是运行时动态绑定 - ✅ 真实用法：封装查询函数时避免硬编码父选择器，比如
findButtons(container) { return container.querySelectorAll(':scope button'); } - ✅ 必须配对：
<div class="card" scope> 才能触发 <code>@scope (.card) - ❌
<div class="card scope"> 或 <code><div class="card" data-scope> 都无效 <li>⚠️ <code>to边界语法极脆弱：写@scope (article[scope]) to (footer)，必须确保每个匹配的article内部真实存在<footer></footer>，否则规则失效 - 属性选择器：
[data-component="user-card"] .avatar，手动加data-属性，兼容性拉满 - Shadow DOM：
hostEl.attachShadow({ mode: 'open' })，天然样式封闭，适合 Web Components - CSS-in-JS 库（如 Linaria、Vanilla Extract）：编译时生成唯一 class 名，无运行时开销
别在全局样式里写 :scope —— 它不会限制作用域
你在 <style></style> 里写 :scope .title { color: blue; }，实际效果等同于 .title { color: blue; }，甚至可能意外匹配到文档任意位置的 .title。
原因很简单：CSS 解析阶段没有“当前元素”概念，:scope 被当作 :root 处理，也就是整个文档根节点。
@scope 规则 + :scope 伪类：Chrome 125+ 专属实验功能
目前只有 Chrome 125+ 默认支持 @scope，Firefox 和 Safari 完全不支持，且不提供启用开关。它不是渐进增强特性，而是“有或没有”的硬分界。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
哪怕写了 @scope (.card) { :scope { border: 1px solid #ccc; } }，若对应 HTML 缺少 scope 属性（注意：是 attribute，不是 class），整条规则会被浏览器静默丢弃，DevTools 里也看不到任何提示。
真正需要局部样式隔离？用更稳的方案
:scope 和 @scope 都不是生产环境可用的样式隔离手段。它们语义清晰，但落地条件太苛刻：依赖特定浏览器版本、特定 HTML 属性、特定插入时机。
如果你的目标是“让某段 CSS 只作用于某个容器及其后代”，优先选这些已被验证的方式：
把 :scope 当成 querySelector 的语义糖可以，当成样式封装方案就会踩坑——它解决的是“查询上下文明确性”问题，不是“样式作用域隔离”问题。
