@scope不能替代shadow dom，因其仅约束css匹配范围而不创建新dom边界，不隔离js、事件或字体动画；shadow dom则从底层实现样式、脚本、事件三重运行时隔离，且浏览器支持更广更稳定。
为什么@scope不能替代Shadow DOM做样式隔离
@scope只约束CSS匹配范围，不创建新的DOM边界。它让.title只作用于.card内部的后代元素，但.card本身仍在light DOM里，外部JS仍能直接操作其子节点、事件仍会冒泡到document、@font-face和@keyframes依然全局生效。Shadow DOM则从底层隔离了样式、脚本、事件流三者——shadowRoot.querySelector('.title')查不到light DOM里的同名元素，document.styleSheets也拿不到shadow内部的样式表。
浏览器支持差异极大，别在生产环境混用
截至2026年8月：@scope仅在Chrome 125+、Edge 125+、Safari 17.4+中默认启用；Firefox 128虽已发布，但仍未实现该特性，且无实验性开关可开启。Shadow DOM则自Chrome 41、Firefox 63、Safari 10.1起就已稳定支持，是当前唯一跨浏览器可用的运行时隔离机制。如果你写了@scope (.card) { .title { color: red; } }却忘了加scope属性（必须是<div class="card" scope>，不是<code>data-scope或class="scope"），整条规则会被浏览器静默丢弃，DevTools里连警告都没有。
它们解决的是不同层级的问题
@scope适合轻量级局部约束，比如在一个卡片组件内限制h2、p的样式影响范围，不改变DOM结构，也不影响第三方库的初始化逻辑；Shadow DOM适合强隔离场景，比如嵌入第三方统计widget、封装支付弹窗、或微前端中挂载独立子应用。但要注意：Shadow DOM下document.querySelector查不到shadow内部节点，getComputedStyle无法跨边界读取CSS变量，<slot></slot>内容默认受外部样式影响，需手动加all: initial重置。
实际项目中怎么选
优先用Shadow DOM：只要目标容器可控（比如一个<div id="payment-widget">），就直接<code>element.attachShadow({ mode: 'open' })，再把第三方<link>和HTML结构append进去——这是目前唯一真正“零侵入”的方案。
谨慎试用@scope：仅限已明确锁定Chromium系用户的内部管理后台，且只用于非关键UI模块；不要指望它防住!important或高权重选择器（如body button）；更别把它和:scope伪类混淆——后者在@scope块外单独使用时完全无效。
真正容易被忽略的是：@scope不解决JS作用域问题，也不阻止事件穿透；而Shadow DOM的mode: 'closed'会让调试变得困难，mode: 'open'又可能被恶意脚本绕过。两者都不是银弹，得看你的隔离诉求到底落在哪一层。
