HTML无原生模块化，可行方案依赖构建工具或fetch+DOM操作；废弃的HTML Imports已不被支持；推荐构建时内联（如rollup-plugin-html）或运行时fetch+insertAdjacentHTML。
HTML 本身没有原生模块系统，所谓“HTML 模块化”不是靠 <script type="module"></script> 那套机制生效的——直接在 HTML 里写 <import></import> 或 import 会报错、被忽略。所有可行方案都依赖构建工具、服务端处理或浏览器 API 的间接支持。
用 HTML Imports？它已废弃且无现代浏览器支持
Chrome 50–73 曾短暂支持 <link rel="import">，但 2019 年起全系移除。现在任何主流浏览器打开含该标签的页面，控制台都会报 Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME 或静默失败。
- 别在新项目中查 MDN 或老教程照搬
HTMLImports示例 - 已有旧代码需迁移：必须替换为
fetch()+innerHTML或构建时内联 - 即使配合
webcomponentsjspolyfill，也无法覆盖 Safari 和新版 Edge
真正可用的模块化路径：构建时内联 + rollup-plugin-html 或 posthtml-include
这是当前最稳定、零运行时开销的方案：把 header.html、footer.html 等片段在打包阶段拼进主 HTML，输出仍是单个静态文件。
-
rollup-plugin-html支持<include src="header.html"></include>语法，自动解析相对路径并注入 -
posthtml-include更轻量，配合gulp-posthtml或 Vite 插件vite-plugin-html即可启用 - 注意路径解析基准是入口 HTML 文件所在目录，不是当前
<include></include>所在文件 - 不支持动态传参（如
<include src="card.html" title="Hello"></include>），需改用模板引擎
需要运行时加载？用 fetch() + insertAdjacentHTML() 控制粒度
适合局部刷新、SPA 中的可折叠区块、A/B 测试组件等场景。比 iframe 更轻，比 innerHTML 更安全（可过滤 script 标签）。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 避免直接
element.innerHTML = responseText，防止 XSS；优先用insertAdjacentHTML('beforeend', ...) - 加载失败时要有 fallback 内容，比如
<div class="loading">... + <code>catch()后显示错误提示 - 重复调用同一 URL 时注意缓存：
fetch(url, { cache: 'force-cache' })或加时间戳参数 - Vite/HMR 环境下，热更新不会触发
fetch重载，需手动监听import.meta.hot - 仅当模块内容完全独立（如第三方广告、沙箱化表单）才考虑
iframe -
srcdoc属性可内联 HTML 字符串，避免额外请求，但不支持外部资源（<link>、<script src></script>会被忽略） - 父页面无法用
getComputedStyle()获取 iframe 内元素样式，调试困难
为什么不用 iframe 做模块化？隔离性过强反成负担
iframe 确实能物理隔离样式和脚本，但代价明显：独立上下文、无法响应父页面 CSS 媒体查询、SEO 友好性差、滚动条嵌套、跨域通信复杂。
真正的难点不在“怎么拆”，而在“拆完之后如何保持样式作用域、事件委托不漏、构建产物路径正确”。很多团队卡在 posthtml-include 路径报 404，其实是没配对 root 选项；也有在 fetch() 加载后发现按钮点击无效，是因为事件绑定早于 DOM 插入。这些细节比选哪种方案更决定落地成败。
