iframe的css作用域天然独立，不引用也不穿透外部样式；父页样式无法匹配iframe内元素，子页需主动适配统一风格。
iframe 本身不引用外部样式，也不“穿透”外部样式——它的 CSS 作用域天然独立。所谓“引用外部样式”或“样式穿透”，通常是误操作导致的视觉错觉或配置疏漏。
iframe 的样式隔离是硬边界，不是可开关的选项
iframe 渲染后是一个完整 Document，拥有自己的 window、document 和 CSSOM。父页面的 body { font-size: 14px } 不会直接继承进 iframe，但字体族（font-family）等部分属性会通过浏览器默认继承机制带入——这不是穿透，而是 UA 样式层的初始值传递。
- 子页面若未显式设置
html { font-size: 16px }，其rem计算仍基于自身html节点，不受父页影响 - 父页的
.btn { color: red }永远不会匹配 iframe 内的<button class="btn"></button>，无需加选择器前缀 - 真正容易混淆的是：子页面 HTML 中写了
<link rel="stylesheet" href="./style.css">，而该路径在父页上下文里 404 —— 这不是样式没隔离，是资源加载失败
跨域 iframe 下无法注入样式，同源时也必须走正确路径
同源 iframe 可以通过 contentDocument 注入样式，但必须确保文档已加载完成；跨域则完全不可行，任何尝试读取 contentDocument 或写入 <style></style> 都会抛 SecurityError。
- 正确时机：监听 iframe 的
load事件后再操作，而不是DOMContentLoaded或 DOM 插入后立即执行 - 正确写法：
iframe.contentDocument?.head.appendChild(styleEl)，且 styleEl 必须是新创建的节点，不能复用父页已有<style></style> - 错误做法：在父页 JS 里直接
document.querySelector('iframe').contentDocument.write(...)—— 已废弃且会清空整个子文档 - 注意：即使同源，若 iframe 设置了
sandbox属性但没加allow-scripts，contentDocument也会为null
想让父页样式“影响”iframe？别绕路，改子页本身
没有合法、稳定、可维护的方式让父页面 CSS 主动作用于 iframe 内容。所谓“穿透”本质是设计反模式。如果需要统一视觉风格，唯一可控路径是子应用主动适配。
- 子页面在
中引入同一份 CDN 上的 UI 框架 CSS（如https://cdn.example.com/antd/v5.css），而非本地相对路径 - 主应用通过 URL 参数或
postMessage向子页传递主题标识（如{ theme: 'dark' }），子页根据该值切换class或 CSS 变量 - 避免在子页中使用
@import引入父页样式文件——路径解析基于子页 URL，99% 会 404 - 不要用
document.domain = 'example.com'试图降域通信：现代浏览器已限制该 API，且对跨协议/端口无效
真正难处理的从来不是“怎么穿透”，而是“为什么需要穿透”——这往往暴露了微前端职责划分不清。iframe 的隔离性不是缺陷，是它存在的全部理由。强行打破，等于放弃它最核心的价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
