应优先使用 Shadow DOM 而非 iframe 嵌入第三方 HTML 组件，因其能实现样式、脚本、DOM 三层原生隔离；iframe 虽简单但存在跨域限制、sandbox 风险、交互失控等问题，仅适合纯静态同源片段。
直接用 <iframe> 最省事，但不是最安全、最可控的方案；真正要嵌入第三方 HTML 组件（比如 CMS 可复用区块、UI 框架组件），必须考虑样式隔离、脚本执行控制和 DOM 交互边界——否则轻则布局错乱，重则覆盖全局样式、劫持事件。
为什么 <iframe> 不该是默认首选
它确实开箱即用，但代价明显：
-
<iframe>创建完全独立的浏览上下文，document、window、CSSOM全部隔离，父页无法直接操作其内部 DOM，连querySelector都得绕contentDocument，且跨域时彻底失效 - 默认不启用
sandbox会带来点击劫持、表单提交失控等风险；加了sandbox又可能让组件功能残缺（比如禁了allow-scripts，Foundation 的 JS 插件就全挂） - 加载后无法动态注入新样式或补丁脚本；若第三方 HTML 自带
<script>标签，用innerHTML注入不会执行，而<iframe>又没法改写其源文件 - 移动端缩放、滚动穿透、焦点管理常出问题，尤其在嵌套
transform容器里拖拽时坐标偏移
用 attachShadow 封装才是现代解法
把第三方 HTML 块及其依赖 CSS/JS 全部塞进 Shadow DOM，样式自动作用域隔离，外部样式进不来，内部样式出不去，这才是“零污染”嵌入的核心机制。
- 容器只需一个空
<div id="widget-root"></div>，不渲染任何内容，只作挂载点 - 用
$shadow.attachShadow({ mode: 'open' })创建 shadow root，mode: 'open'方便 DevTools 调试 - 所有第三方 CSS 必须用
<link rel="stylesheet">插入 shadow root 内部，不能放主文档<head>—— 否则照样全局污染 - HTML 结构建议用
template.innerHTML构建后root.appendChild(template.content.cloneNode(true))，避免重复解析 - 若组件含内联
<script>，需手动提取并用eval()或import()执行（注意 CSP 限制），原生innerHTML不触发脚本
fetch + innerHTML 适合什么场景
它适用于纯静态 HTML 片段（比如 header、footer）、无 JS 依赖、且你完全信任源文件内容的场景。一旦第三方 HTML 包含交互逻辑或框架初始化代码，这条路就走不通。
立即学习“前端免费学习笔记（深入）”；
- 必须确保目标 HTML 文件同源，否则
fetch直接被 CORS 拦截；跨域需服务端代理或对方配Access-Control-Allow-Origin -
response.text()返回的是字符串，赋给innerHTML后 DOM 已构建，但<script>标签不会自动执行——这是浏览器安全策略，不是 bug - 若必须执行脚本，得用正则提取
<script>...</script>内容，再创建script元素插入 shadow root 或当前 document（注意执行顺序和依赖） - 别用
document.write或document.open/close，它们已废弃，且会清空整个页面
服务器端包含（SSI）或构建时内联更隐蔽也更稳
如果你能控制部署流程（比如用 Nginx/Apache + SSI，或 Webpack/Vite 构建时处理），这是最干净的方案：客户端收到的就是完整 HTML，没有额外请求、没有 JS 执行时机问题、没有跨域顾虑。
- SSI 要求文件扩展名是
.shtml，且服务器开启Includes模块，语法是<!--#include file="header.html" --> - Vite 用户可用
vite-plugin-html或自定义插件，在构建阶段读取并内联 HTML 片段 - Webpack 可用
html-webpack-plugin配合html-loader，把src="header.html"当模块导入 - 注意路径解析：构建工具内联时相对路径基于入口文件，SSI 基于当前文件所在目录，两者行为不一致，容易漏资源
真正难的从来不是“怎么把 HTML 塞进去”，而是“怎么让它在里面活得好、不出事、不惹祸”。Shadow DOM 是目前唯一能同时解决样式、脚本、DOM 三层隔离的原生方案；其他方式都在某一层妥协。别图快跳过 sandbox 配置、CSP 头、postMessage 边界校验——这些不是可选项，是上线前必须验证的底线。
