Teleport后scoped样式失效是因为被传送的DOM脱离当前组件作用域，不携带data-v-xxx属性，导致编译后的带属性选择器无法匹配；解决方案包括:deep()穿透、CSS Modules或全局BEM样式。
Teleport后scoped样式失效的典型现象
你写了 .modal__header，在 <Teleport to="body"> 里渲染后发现样式没生效，浏览器开发者工具里能看到 class 名还在，但 CSS 规则被过滤或权重不足。这不是 Vue 的 bug，而是 scoped 样式机制的必然结果：Vue 会给组件内元素加一个唯一 data 属性（比如 data-v-abc123），再把 CSS 选择器重写成 .modal__header[data-v-abc123] ——可 Teleport 出去的内容，DOM 节点已经不在当前组件的根节点下，这个 data 属性不会自动带上，自然匹配失败。
用 :deep() 穿透 scoped 样式作用域
这是最常用也最直接的解法，适用于你仍想保留单文件组件 + scoped 的开发习惯。
-
:deep()是 Vue 编译器识别的伪类，它会让其后的选择器“逃逸” scoped 作用域限制 - 必须写在
<style scoped>块内，且只对后代选择器生效（不能用于顶层 class） - 不要嵌套多层
:deep(:deep(.xxx))，无效；也不要用:deep(*)全局污染
<style scoped>
.modal {
/* 这个会失效：.modal 被加上 data-v-xxx，但 DOM 已不在当前组件内 */
}
:deep(.modal__header) {
font-size: 1.2rem;
color: #333;
}
:deep(.modal__body p) {
line-height: 1.6;
}
</style>改用 CSS Modules 或全局 style 配合 BEM 命名
如果你的项目已接入 CSS Modules（如 Vite 默认支持），或者愿意为 Teleport 内容单独管理样式，这条路更可控、无副作用。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- CSS Modules 会为每个 class 生成哈希后缀，但它是基于文件而非组件作用域，Teleport 后 class 名不变，样式依然能命中
- 全局
<style>不加 scoped，配合严格的 BEM 命名（如o-modal__header、c-toast__content）可避免冲突 - 避免在全局 style 里写泛化选择器（如
div、p），只写带 BEM 前缀的 class 规则
<!-- Modal.vue -->
<template>
<Teleport to="body">
<div class="c-modal" :class="{ 'is-open': open }">
<div class="c-modal__overlay"></div>
<div class="c-modal__dialog"></div>
</div>
</Teleport>
</template>
<p><style>
/<em> 全局生效，BEM 命名确保不撞车 </em>/
.c-modal { position: fixed; z-index: 1000; }
.c-modal<strong>overlay { background: rgba(0,0,0,.5); }
.c-modal</strong>dialog { background: white; border-radius: 4px; }
</style>动态添加 data-v-* 属性绕过 scoped 限制（慎用）
极少数场景下，你既不想改样式方案，又无法用 :deep()（比如第三方库组件被 Teleport 包裹），可以手动补上 scoped 的 data 属性。
立即学习“前端免费学习笔记（深入）”；
- 通过
ref拿到 Teleport 渲染后的根元素，在onMounted或onUpdated里用el.setAttribute('data-v-xxx', '') - xxx 必须和当前组件的 scopeId 一致，可通过
getCurrentInstance()?.type.__scopeId获取（非公开 API，Vue 内部使用，存在兼容风险） - 不推荐日常使用——破坏封装、难维护、升级 Vue 版本可能失效
真正需要关注的是：BEM 的语义完整性是否被 Teleport 破坏。比如 .c-dropdown__menu 被传送到 body 后，它和 .c-dropdown__trigger 的视觉关系仍在，但 DOM 层级断裂了。这时光靠 CSS 不够，得配合 aria-labelledby、aria-controls 等属性维持可访问性，这点容易被忽略。
