HTML导入与文件解析技术解析

HTML的`link[rel="import"]`已被所有主流浏览器彻底废弃，它从未真正解析HTML、构建DOM或执行脚本，仅作为历史遗留的“伪功能”存在；如今唯一可靠、可控的HTML文件导入与解析方式是手动组合`fetch`获取原始文本和`DOMParser`进行显式解析，同时需严谨处理MIME类型校验、节点导入、脚本执行、样式注入、相对路径重写及跨域限制等关键细节——任何试图绕过JavaScript层解析而依赖HTML原生标签的方案，本质上都是方向性错误。

link[rel="import"] 已被所有主流浏览器彻底移除，它从不解析 HTML 文件内容，也不触发任何 DOM 构建、样式注入或脚本执行——它只在废弃阶段“假装”做了点事，实际什么都没干。现在试图用它加载 header.html 或 component.html，浏览器会静默忽略该标签，控制台甚至不报错。

为什么 link[rel="import"] 不能当文件解析器用

它根本不是为“解析 HTML 字符串”设计的： - 浏览器从未将导入的 HTML 文本当作可解析的文档源，而是当作一个被隔离的资源容器（类似 iframe 的早期雏形，但没实现） - 即使在 Chrome 36–60 短暂支持期，它也只同步暴露 import.content 属性，且该属性返回的是一个**已解析完毕的 Document 对象**——前提是导入成功；而这个“成功”本身依赖于服务端返回正确的 text/html MIME 类型和同源策略放行 - 它不提供任何钩子让你干预解析过程（比如只取 #sidebar、跳过 、重写相对路径），完全黑盒 - 所有现代构建工具（Vite、Webpack、esbuild）和框架（React/Vue/Svelte）均不识别该标签，打包时直接剔除

fetch + DOMParser 是唯一可控的替代路径

真正能拿到 HTML 字符串并按需解析的，只有手动拉取 + 显式解析链路： - fetch() 拿到原始文本（注意检查 res.ok 和 Content-Type） - 必须传 'text/html' 给 DOMParser().parseFromString()，否则自闭合标签（如 、）会被当成 XML 解析，节点丢失 - 解析后得到的是独立 Document，不能 appendChild() 直接挂载——得用 document.importNode() 或提取 doc.body.children - 若原 HTML 含