<template>标签本身不渲染，必须用JavaScript克隆content后插入DOM；其innerHTML为空字符串，内容以DocumentFragment形式存储在content属性中，直接操作innerHTML会破坏结构且存在XSS风险。
template 标签本身不渲染、不执行脚本、不加载资源，它只是个“静默的 DOM 仓库”——想复用，必须用 JavaScript 克隆后手动插入。
为什么直接 innerHTML 取不到内容？
template 元素的 innerHTML 永远是空字符串；浏览器把它的内容解析为 DocumentFragment，藏在 content 属性里。试图用 innerHTML 提取再 replace() 占位符，会破坏嵌套结构（比如 <input type="date"> 或自闭合标签），还可能引入 XSS 风险。
- 正确路径：先取
template.content，再调.cloneNode(true) - 错误操作：
template.innerHTML.replace(...)或template.innerText - 注意：
content是只读的DocumentFragment，不能直接 appendChild 到页面，必须 clone
克隆后怎么安全填充数据？
克隆出的节点是干净的 DOM 实例，但没绑定任何事件，也不带状态。填充时优先用语义化 API，避免字符串拼接：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 文本内容用
textContent（防 XSS）而不是innerHTML - 属性更新用
el.setAttribute('src', url)，别直接改el.src = url（某些老浏览器不触发加载） - 表单控件必须重置
name和id，否则多个实例提交时字段覆盖、label[for]错位、form.checkValidity()失效 - 推荐用
dataset存元信息，比如form.dataset.context = "shipping"，比塞隐藏字段更可控
哪些场景下 template 不够用？
template 只解决「一次定义、多次克隆」的基础复用，它没有响应式、无条件逻辑、无作用域插值。一旦出现这些需求，硬扛容易翻车：
立即学习“前端免费学习笔记（深入）”；
- 需要根据数据动态显示/隐藏某块结构 →
template不支持v-if类语法，得手动el.remove()或el.style.display = 'none' - 频繁更新同一实例的多个字段（如实时搜索卡片）→ 每次都
cloneNode+ 全量替换太重，不如用textContent/dataset局部更新 - 模板含
<style></style>或<script></script>→ 它们虽不执行，但会被计入资源计数；上线前得人工清理，否则拖慢首屏 - Safari 15.4 之前对
fieldset或required输入框的克隆有 bug，checkValidity()返回异常
真正容易被忽略的是：复用的前提不是“能 clone”，而是“模板是否中立”。如果里面写死 class="card card--tech" 或 h1 标题文字，换到用户列表或通知页就得重写——内容与结构耦合越紧，后期改起来越像在拆炸弹。
