HTML Modules 目前未被主流浏览器原生支持，因模块加载器仅识别 JavaScript，HTML 文件 MIME 类型不匹配且不符合 ES 模块语法；可行方案包括 fetch + innerHTML、自定义元素、构建时转为 JS 字符串模块，并需注意 XSS 防护与路径处理。
HTML Modules 目前（截至 2024 年）尚未被主流浏览器原生支持，也不提供直接异步导入原始 HTML 字符串作为模块的功能。所谓“HTML Modules”曾是 W3C 探讨的提案（如 <script type="module" src="template.html">），但已搁置；当前标准中，.html 文件无法像 .js 那样被 JavaScript 模块系统直接 import 解析为可执行模块。
为什么不能直接 import HTML 文件？
浏览器模块加载器只识别 JavaScript（含 type="module" 的 JS 文件）。即使你写：
<script type="module">
import template from './card.html'; // ❌ 语法错误，不合法
</script>
这会立即报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".
立即学习“前端免费学习笔记（深入）”；
根本原因：MIME 类型不匹配，且 HTML 不是 ECMAScript 模块语法。
可行的替代方案（生产可用）
虽然不能“直接 import HTML”，但可通过以下方式实现「异步获取 HTML 字符串 + 安全挂载」的目标：
-
使用
fetch()+innerHTML（最轻量）：
适合静态模板、无交互逻辑的片段。注意需手动处理脚本执行和事件绑定。 -
封装为自定义元素（Custom Element）：
将 HTML 模板与行为封装进class extends HTMLElement，通过import('./my-card.js')异步加载组件类，再用document.createElement('my-card')挂载 —— 模板通常内联在 JS 中或通过fetch加载。 -
构建时预处理（推荐用于工程化项目）：
用 Vite、Webpack 或 esbuild 插件（如vite-plugin-html、rollup-plugin-string）将.html文件转为导出字符串的 JS 模块。例如：
template.html → auto-generated template.js：
export default `...`;
然后即可：const html = await import('./template.js'); el.innerHTML = html.default;
安全挂载 HTML 的关键细节
无论用 fetch 还是构建转换，挂载原始 HTML 时务必注意：
- 避免直接
el.innerHTML = htmlString注入含<script>的内容（脚本不会执行，且有 XSS 风险）；如需执行脚本，必须手动创建并插入<script>标签，并设置script.type = 'module'或调用eval()（不推荐）。 - 优先使用
el.replaceChildren(...)或el.setHTML(htmlString)（实验性 API，暂未广泛支持）替代innerHTML，更可控。 - 若模板含相对路径资源（如
<img src="avatar.jpg">），需确保路径相对于当前页面，而非 HTML 文件位置 —— 因 HTML 是作为字符串加载的，没有“基础 URL 上下文”。
一个最小可行示例（fetch + 挂载）
假设 ./templates/card.html 内容为：
<div class="card">
<h3>Hello</h3>
<p>From HTML file</p>
</div>
在模块中这样使用：
async function renderCard(container) {
const res = await fetch('./templates/card.html');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const html = await res.text();
container.innerHTML = html; // 或用 DOMParser 解析后挂载更安全
}
调用：renderCard(document.getElementById('target'));
