Scoped CSS 本质是属性选择器“障眼法”，仅通过编译时添加唯一 data-v-xxx 属性前缀实现样式局部化，不创建 DOM 边界，无法阻止全局样式穿透、标签选择器性能差、v-html 动态内容失效；Shadow DOM 才是真正隔离边界，iframe 适合沙箱而非组件，@scope() 仅为轻量匹配约束。
Scoped CSS 本质是属性选择器“障眼法”
它不创建任何 DOM 边界，只是构建时给每个 class 加上唯一属性（如 data-v-4c3b6c1c），再让样式选择器带上该属性前缀。外部写 button { color: red } 仍能穿透生效，* { margin: 0 } 全局重置也照常影响内部元素。
常见错误现象包括：
- 子组件内层元素没被加属性（只有最外层标签带
data-v-xxx），导致父组件scoped样式无法命中 - 用标签选择器（如
h1）写scoped样式，性能下降明显，浏览器需遍历所有h1并逐个比对属性 - 动态插入 HTML（如
v-html）完全绕过编译，生成的属性和哈希对不上，样式直接失效
如果你在 Vue 里混用全局和本地样式，可以同时写两个 <style> 块：<style> 写全局规则，<style scoped> 封装组件私有样式——但得记住，它们共存时权重会打架，scoped 的类选择器实际是 .btn[data-v-xxx]，比普通 .btn 权重高一级。
Shadow DOM 才是真正的样式边界
调用 element.attachShadow({ mode: 'open' }) 后，浏览器解析器会在影子树内跳过所有不匹配的选择器，不是“加前缀”，而是“根本不匹配”。外部样式默认进不去，内部样式默认出不来，连 font-family、color 这类继承属性都不会自动透传。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑有：
-
mode: 'closed'会让element.shadowRoot返回null，DevTools 看不到影子树，调试困难，生产环境基本不用 -
::slotted(*)只作用于通过<slot>投影进来的节点，对 shadow 内部自己写的<button>无效 - 动态插入
<style>字符串（如shadowRoot.innerHTML += '<style>...</style>'）会破坏隔离，必须用document.createElement('style')+shadowRoot.appendChild()
Web Components 中的 :host、:host-context() 是影子树专用伪类，不能嵌套使用（比如 .card :host 是非法写法），它们只在 shadow 内部生效。
iframe 隔离最强但不是“组件”方案
<iframe> 拥有独立 document、window 和样式作用域，天然阻断一切样式污染，但它不是用来封装 UI 组件的——它是沙箱容器。
典型问题包括：
- 每次加载触发完整 HTML 解析 + 渲染流水线，内存占用和首屏延迟远高于 Shadow DOM
- 父子通信只能走
postMessage，无法共享状态、不能直接访问 DOM、事件不冒泡 - iOS Safari 对
height: 100%支持不稳定，双滚动条、焦点丢失频发 - 服务端预渲染内容无法继承父页的
<link rel="preload">等资源提示，SEO 不友好
别把它当成“更狠的 scoped”，它适合嵌入第三方不可信内容（比如广告、用户提交的富文本），不适合做常规业务组件。
@scope() 是轻量补充，不是替代方案
@scope (.card) { .title { color: #333; } } 这种语法（Chrome 125+、Safari 17.4+ 支持）只约束 CSS 匹配范围，不创建新 DOM 边界，也不隔离 JS 或事件。它不会阻止外部 body { color: blue } 影响 .card .title 的继承链，也不能防止 v-html 注入的样式逃逸。
适用场景很窄：
- 已有大量非组件化 HTML，想局部收束某块区域的样式作用域
- 不想改 DOM 结构，又需要比 class 命名约定更强一点的约束
- 作为 Shadow DOM 的降级 fallback（但注意：它不提供任何 JS 或事件隔离）
真正要解决样式逃逸+JS 隔离+事件边界三重问题，目前只有 Shadow DOM 是原生、可靠、可调试的路径；其他方案都在某个维度上妥协或绕行。
