link[rel="import"]已被彻底移除，它从不解析html、不构建dom、不执行脚本；唯一可控的替代方案是fetch+domparser手动解析。
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、跳过 <script></script>、重写相对路径），完全黑盒
- 所有现代构建工具（Vite、Webpack、esbuild）和框架（React/Vue/Svelte）均不识别该标签，打包时直接剔除
fetch + DOMParser 是唯一可控的替代路径
真正能拿到 HTML 字符串并按需解析的，只有手动拉取 + 显式解析链路：
- fetch() 拿到原始文本（注意检查 res.ok 和 Content-Type）
- 必须传 'text/html' 给 DOMParser().parseFromString()，否则自闭合标签（如 <img>、<input>）会被当成 XML 解析，节点丢失
- 解析后得到的是独立 Document，不能 appendChild() 直接挂载——得用 document.importNode() 或提取 doc.body.children
- 若原 HTML 含 <script src="util.js"></script>，它不会自动加载执行；要执行，得手动创建 script 标签并 append 到当前 document.head，且受同源限制
innerHTML 看似简单，但绕不开三个坑
很多人直接走 el.innerHTML = await res.text() 这条捷径，结果踩进这些隐性陷阱：
- <script></script> 标签里的代码**默认不执行**（除非插入到 document.body 下且满足特定条件）
- <link rel="stylesheet"> 和 <style></style> 不会生效，CSS 规则不注入
- 所有相对路径（如 src="./logo.png"）仍以当前页面 URL 为基准，不会自动切换到导入文件所在目录
- 多次设置 innerHTML 会触发重复 layout/reflow，大量片段建议先塞进 DocumentFragment 再一次性 append
封装 importHTML() 时必须处理的边界
轻量封装确实省事，但以下逻辑漏掉一个就会在生产环境出问题：
- 检查 response.headers.get('content-type')?.includes('html')，防止服务端返回 404 页面（text/html）却误当模板
- selector 参数默认不能是 'body'——因为 DOMParser 解析出的 doc.body 是空的，真实内容在 doc.body.children 或 doc.documentElement.children
- 跨域请求必须由服务端显式设置 Access-Control-Allow-Origin，前端无法绕过
- 如果目标 HTML 含 <base href="/sub/">，解析后不会自动修正内部相对路径，得自己遍历 img/src、a/href 等属性重写
真正需要复用 HTML 片段时，“解析”不是可选项，而是必经步骤；而这个步骤永远发生在 JavaScript 层，不在 HTML 标签里。别再找 rel="import" 的 polyfill 了——它就像给自行车加涡轮，方向错了，力气越大越偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
