html 不支持原生 import html 文件，因 es module 规范仅允许导入 javascript；需通过 js 动态加载、构建预处理或 web components 实现模块化； 克隆和自定义元素是两种主流轻量与封装方案。
HTML 本身不支持 import './header.html' 这类模块化语法，所有“HTML 模块化”方案都必须绕过这个限制——要么靠 JS 动态加载，要么靠构建时预处理，要么靠 Web Components 封装。不存在开箱即用的原生 HTML 模块导入机制。
为什么直接 import HTML 文件会报错
浏览器解析 <script type="module"></script> 时只认 JavaScript 文件，遇到 import 路径指向 .html 后缀，会抛出 TypeError: Failed to resolve module specifier。这不是路径写错，是规范层面不支持。
- ES Module 的
import只对 JS 有效，和文件后缀强绑定 -
type="module"的脚本只能加载 JS，且必须是相对/绝对 URL（不能是 bare specifier） - 即使你用
fetch('header.html')加载成功，得到的也只是字符串，需手动插入 DOM，不是“模块化导入”
用 <template></template> + JS 克隆是最轻量的复用方式
适合无构建工具、纯静态页、兼容 IE11+ 的场景。它不依赖服务器或打包流程，结构清晰，语义保留完整。
- 把可复用片段包在
<template id="header-template"></template>里，内部仍用<header></header>、<nav></nav>等语义标签 - 克隆时必须用
document.importNode(template.content, true)，比cloneNode(true)更安全（尤其含表单、<slot></slot>时） - 插入前记得检查
template.content是否为空文档片段，否则可能取不到内容 - 不要在克隆后直接操作
template.content，它已被移出文档流，应操作克隆结果
Web Components 是唯一真正封装 HTML/CSS/JS 的原生方案
只有 customElements.define() 注册的自定义标签（如 <site-header></site-header>），才具备样式隔离、生命周期控制和属性响应能力。
- 必须继承
HTMLElement，且在constructor()中调用super()，漏掉会报Failed to construct 'CustomElement': Please use the 'new' operator - DOM 操作要放在
connectedCallback，而非constructor（此时元素尚未挂载） - 想响应属性变化（如
<my-card title="Hello"></my-card>），得声明static get observedAttributes()并实现attributeChangedCallback - Shadow DOM 默认启用样式隔离，但若用
attachShadow({ mode: 'open' })，调试时可在 DevTools 查看内部结构
开发时必须起本地服务器，否则 type="module" 会失败
现代浏览器默认禁止从 file:// 协议加载模块脚本，这是 CORS 策略所致。哪怕代码完全正确，双击打开 HTML 文件也会卡在模块加载阶段。
- 推荐用
npx serve或python3 -m http.server启一个简易服务，端口默认为 5000 或 8000 - Vite 创建的项目自带开发服务器，
npm run dev即可启动，支持热更新和模块解析 - 别用 Live Server 插件替代真实服务——某些插件模拟的协议头不全，仍可能触发 CORS 问题
真正容易被忽略的是：模块化不是“拆文件”，而是“划边界”。无论用 <template></template> 还是 Web Components，如果内部结构仍堆 <div class="box1">、样式仍全局污染、语义标签乱嵌套，那只是物理拆分，不是模块化。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
