:scope 不能用于限制组件样式作用域，仅在 javascript 的 queryselector 系列方法中有效，指向调用元素本身；在 css 中被忽略或等价于 :root，无法实现样式隔离。
:scope 不能用来限制组件样式作用域 —— 它在 CSS 文件、<style></style> 标签里写就无效，浏览器直接忽略。
为什么 :scope 在样式表里完全没用
浏览器解析 CSS 时没有“当前元素”上下文，:scope 被当作 :root 处理，也就是整个文档。你写 :scope .title { color: blue; }，实际等价于 .title { color: blue; }，甚至可能意外匹配到页面任意位置的 .title。
- 它不是 Vue 的
<style scoped></style>，也不是 Sass 的&，不参与编译时拼接 - 原生
<style scoped></style>属性早在多年前就被移除，现在所有“scoped”效果都靠构建工具注入属性实现 - DevTools 里看不到报错，但规则静默失效 —— 这是最容易踩的坑
:scope 真正能用的地方只有 JS 查询
它只在 Element.prototype.querySelector() 和 querySelectorAll() 中生效，且仅指向调用该方法的那个元素本身。
- ✅ 正确用法：
container.querySelectorAll(':scope > .item')——:scope指向container，只查其直系子元素 - ❌ 错误用法：
document.querySelector(':scope p')——document不是 Element，不支持:scope - Safari 是唯一支持
{ scope: true }选项的浏览器，但仍是实验性 API，生产环境不能依赖 - Firefox 117+、Chrome 125+ 才稳定支持，旧版本会静默忽略整个选择器
想真正隔离组件样式？别碰 :scope，选这些
目前没有浏览器支持用 :scope 做样式隔离；真正可用的方案是明确区分场景和约束：
- Vue/React 等框架：用
<style scoped></style>（本质是构建时加data-v-xxx属性） - 需要穿透子组件：用
:deep(.class)，不是:scope - 第三方库干扰：用
Shadow DOM（element.attachShadow({ mode: 'open' })），原生、稳定、兼容好 - 纯 HTML/CSS 环境：手动加唯一容器类 + 嵌套选择器，或用 PostCSS 插件批量加前缀
哪怕 Chrome 125+ 支持 @scope 规则，它也要求 HTML 元素带 scope 属性（不是 class，不是 data-scope），且 Firefox/Safari 仍不支持 —— 生产环境拿它做样式隔离，等于主动放弃一半用户。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
