html模板需通过template.content.clonenode(true)克隆使用，直接操作innerhtml或appendchild(template)无效；构建时模板（如vite插件）比运行时js更稳定、seo友好。
HTML 模板本身不强制要求内容复用，但一旦你有多个页面共享导航、卡片、表单等结构，就立刻需要它——原生 HTML 文件不支持 include、不能传参、无法条件渲染，硬写死结构只会让维护成本指数级上升。
为什么直接复制粘贴 HTML 片段是危险的
很多人把 header.html 复制到 10 个页面里，改一个 class 名就得手动搜 10 次。更糟的是：
- 改错一处，其他页面样式错位或功能失效，问题分散难定位
- SEO 友好性被破坏：重复内容被爬虫视为低质，且首屏无关键 HTML（尤其 JS 动态插入时）
- 空格/换行可能变成文本节点：
template.content.firstChild常是空白文本，直接appendChild会插入不可见字符 - 用户数据拼进
innerHTML会触发 XSS，而cloneNode+textContent天然免疫
<template></template> 标签必须配合 content.cloneNode(true) 才能用
<template></template> 不是“写完就能用”的模板，它只是浏览器跳过的占位容器。常见错误是把它当普通 DOM：
-
template.innerHTML永远是空字符串，取不到内容 - 直接
document.body.appendChild(template)什么也不会渲染 - 正确路径只有：获取
template.content→cloneNode(true)→ 填充数据 → 插入真实 DOM - 若模板含
<slot></slot>，独立使用时会被忽略；只有在自定义元素中才生效
示例：
<template id="card"><article class="card"><h3 class="card-title"></h3>
<p class="card-desc"></p>
</article></template><script>
const tmpl = document.querySelector('#card');
const instance = tmpl.content.cloneNode(true); // 必须 clone
instance.querySelector('.card-title').textContent = '标题';
document.body.appendChild(instance);
</script>
构建阶段模板比运行时 JS 更适合内容复用
真正稳定的内容复用，发生在构建时，而非运行时：
-
vite-plugin-html或html-webpack-plugin支持template+data注入，编译后生成纯 HTML，SEO 友好、无 JS 依赖 - EJS/Nunjucks 的
是服务端逻辑，复用靠文件引用，不是靠 DOM 操作 - 前端框架如 Astro 的
<slot></slot>、Hugo 的{{ define "main" }}，本质是编译期结构分发，不是运行时克隆 - Web Components 虽原生，但需手动注册、处理生命周期，
<slot></slot>不自动绑定数据，仍需 JS 配合
最容易被忽略的一点：复用是否成立，不取决于你用了 <template></template> 还是 include，而在于路径是否统一、作用域是否隔离、数据生命周期是否可控——三者错一个，所谓“复用”就退化成多处同步修改的幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
