<template>标签必须置于顶层且手动克隆使用，SSI需服务器支持，外部HTML加载时路径和脚本执行需特殊处理，克隆后须处理ID冲突与状态隔离。
template 标签本身不自动复用，必须配合 JS 手动克隆插入；纯 HTML 文件之间无法原生 include，所有“复用”都是构建时或运行时的模拟行为。
为什么直接写 <!--#include file="nav.html"--> 在本地双击打开就失效
因为 SSI（服务器端包含）需要 Web 服务器解析，浏览器直接打开 file:// 协议时完全跳过该注释——它不是 HTML 标准语法，只是 Apache/Nginx 的扩展指令。常见错误现象：页面空白、导航栏消失、控制台无报错但内容没出来。
- 仅当部署到启用 SSI 的服务器（如 Apache +
mod_include，且文件后缀为.shtml）时才生效 -
file路径是相对于当前文件所在目录，不是模板搜索路径；virtual则按服务器根路径解析 - SSI 不支持变量、条件判断或循环，纯静态文本拼接，复杂逻辑得靠后端模板引擎
template 标签必须放在顶层，否则 template.content 可能为空
Safari 15.4 之前、部分旧版 Edge 会丢弃嵌套在 <div> 或组件内部的 <template> 内容，导致 template.content 是空 DocumentFragment。这是最容易被忽略的兼容性陷阱。
-
<template>必须作为<body>的直接子元素，或放在<head>里（但不能包在任何其他标签内） - 错误写法：
<section><template id="card">...</template></section>→ Safari 下content为空 - 正确写法：把
<template>提到最外层，紧贴<body>开始或结束处
用 fetch() 加载外部 HTML 片段时，相对路径会失效
加载 nav.html 后用 insertAdjacentHTML() 插入，里面写的 <img src="./logo.png"> 会被解析为相对于当前页面 URL，而不是 nav.html 所在目录——这会导致图片 404、CSS 不加载、链接跳转错乱。
- 解决方案一：所有资源路径改用绝对路径（如
/assets/logo.png），统一以站点根目录为基准 - 解决方案二：加载后手动遍历 DOM，重写
src、href属性（需注意<link>、<script>等标签） - 切记：
<script>标签在字符串插入后不会自动执行，需手动创建并 append 到 document —— 有 CSP 和 XSS 风险，慎用
template.content.cloneNode(true) 是唯一安全的克隆方式
试图用 innerHTML.replace() 处理模板字符串，会破坏结构完整性（比如漏掉 <input value="xxx"> 的实际值、丢失 <select> 当前选中项、绕过 XSS 防护）。而 cloneNode(true) 返回的是真实 DOM 实例，保留节点关系和表单状态。
立即学习“前端免费学习笔记（深入）”；
- 必须调用
.cloneNode(true)，否则appendChild(template.content)会把模板内容“搬走”，第二次调用时content就空了 - 克隆后含
id的元素必须重设（如el.id = 'nav-' + Date.now()），否则多个实例 ID 冲突，document.getElementById()行为不可预测 - 填充文本一律用
textContent，填属性用setAttribute()，设表单值用el.value = xxx，不要用innerHTML拼接用户数据
