HTML本身不支持模块化，所谓“HTML模块化”本质是通过JS动态加载HTML片段或使用template、Web Components等技术实现复用，而非原生import HTML文件。
HTML 本身不支持模块化语法，所谓“HTML 模块化”，本质是把 HTML 片段拆出来复用，而 import / export 只对 JavaScript 生效 —— 所以你不能直接 import './header.html'，浏览器会报 TypeError: Failed to resolve module specifier。
用 type="module" 加载 JS 模块，但 HTML 片段仍需手动处理
ES Module 是 JS 层的模块化机制，它让 main.js 能按需导入功能逻辑（如 import { renderHeader } from './components/header.js'），但 HTML 结构本身不会自动注入。常见错误是以为加了 type="module" 就能加载 HTML 文件，其实不行。
-
<script type="module" src="main.js"></script>只能加载 JS 文件，且路径必须是相对或绝对 URL（不能是 bare specifier） - 想动态插入 HTML，得靠
fetch()+innerHTML或insertAdjacentHTML()，比如：fetch('header.html').then(r => r.text()).then(html => document.getElementById('header').innerHTML = html) - 注意：现代浏览器默认禁止从
file://协议加载模块（CORS 策略），开发时得用本地服务器（npx serve、python3 -m http.server或 Vite）
用 <template> + JS 实例化，轻量且无构建依赖
这是最贴近“HTML 模块化”直觉的做法：把可复用结构写进 <template id="nav-template">，再用 JS 克隆、填充、挂载。它不依赖服务器或打包工具，兼容性好（IE11+ 支持）。
- 模板内避免写死内容，用
data-bind或占位符（如{{title}}），由 JS 替换 - 别在
connectedCallback外直接操作template.content，否则可能取到空文档片段 - 克隆后记得用
document.importNode(template.content, true)（比cloneNode(true)更安全，尤其含表单元素时）
自定义元素（Web Components）才是真正的 HTML 模块化
只有 customElements.define() 注册的标签（如 <site-header>）才具备封装性、复用性和语义性 —— 它把 HTML 结构、CSS 样式、JS 行为全部打包进一个标签里，且通过 Shadow DOM 隔离样式。
立即学习“前端免费学习笔记（深入）”；
- 必须继承
HTMLElement，并在constructor()中调用super()；漏掉会报Failed to construct 'CustomElement': Please use the 'new' operator - 不要在
constructor里操作 DOM（此时元素尚未挂载），改用connectedCallback - 属性变更需监听
static get observedAttributes()+attributeChangedCallback，否则<my-card title="Hello">的title不会响应
构建工具里的 HTML 模块化，只在编译期生效
Webpack/Vite 中的 html-loader 或 html-webpack-plugin 支持 require('./footer.html')，但这只是构建时字符串替换，最终输出仍是单个 HTML 文件 —— 浏览器运行时看不到任何模块痕迹。
- 适合中大型项目，能配合变量注入（如
htmlWebpackPlugin.options.title）、条件渲染 - 别指望它能在生产环境动态加载新模块；热更新也仅限开发阶段
- 若用 EJS/Pug 等模板引擎，注意它们的语法（如
）和编译上下文，路径错误会导致构建失败而非运行时报错
真正难的是权衡：要不要引入构建流程？能否接受服务端参与？是否需要样式隔离？多数人卡在“想纯前端又想要 Web Components 的封装性”，结果堆砌 fetch + innerHTML，却忽略了 XSS 风险和首次渲染空白。模块化不是拆得越碎越好，而是让每个模块有明确边界、可控生命周期、以及可验证的输入输出。
