html5 标签是原生元素，非模板引擎，仅支持静态内容克隆；需通过 .content.clonenode(true) 访问并插入dom，不可用 innerhtml，ie不支持需降级处理。
HTML5Template 标签不是模板引擎
它只是浏览器原生的 <template></template> 元素，不解析变量、不支持表达式、不能自动渲染数据。所谓“静态内容克隆”是手动操作 DOM 的结果，不是模板引擎那种 render() 调用。
常见错误现象：document.querySelector('template').innerHTML 返回空字符串（因为内容在文档片段里，不在主 DOM 中）；或直接把 <template></template> 当成普通容器塞进 HTML，结果内容不显示。
- 必须用
.content属性访问内部节点：template.content.cloneNode(true) - 不能用
innerHTML读取或写入，否则会丢失绑定事件和表单状态 - IE 不支持
<template></template>，需检测：typeof HTMLTemplateElement === 'undefined'
怎么克隆 template 内容并插入真实 DOM
核心就三步：取 template → 克隆 content → 插入目标位置。关键在 cloneNode(true)，否则只复制空壳。
使用场景：动态生成列表项、模态框结构、表单重复区块等需要多次复用的静态结构。
立即学习“前端免费学习笔记（深入）”；
- 不要直接
appendChild(template)—— 这会把 template 移走，下次就没得用了 - 必须用
template.content.cloneNode(true)，true表示深克隆 - 克隆后需手动设置文本/属性：
clone.querySelector('.title').textContent = title - 如果 template 里有
<script></script>或<style></style>，克隆后不会执行或生效，得额外处理
const tmpl = document.querySelector('#item-template');
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.name').textContent = '张三';
document.getElementById('list').appendChild(clone);为什么不能用 innerHTML 替代 template.content
因为 innerHTML 是字符串操作，会丢掉已绑定的事件监听器、表单输入值、自定义元素状态；而 template.content 是真实的 Node 对象树，保留全部 DOM 行为语义。
性能影响：对少量结构，差异不大；但高频插入时，cloneNode 比反复 innerHTML += ... 更快且更安全。
-
innerHTML触发重排重绘更频繁，尤其在循环中拼接 -
template.content克隆的是已解析的节点，跳过 HTML 解析阶段 - 若模板含
<input value="xxx">，用innerHTML插入后 value 属性不变，但实际输入框值可能已被用户改写 —— 克隆则保留当前 DOM 状态
兼容性补丁和边界情况
没有原生 <template></template> 的老浏览器（如 IE11 及以下），只能降级用 display: none 的 <script type="text/template"></script> 或隐藏 <div>，但语义弱、易误操作。<p>容易被忽略的地方：template 内部的 <code><slot></slot> 在克隆后不会自动分发内容；CSS 作用域也不继承，得确保样式全局可用或用 <style scoped></style>（仅部分现代浏览器支持）。
- 检查是否存在：
if (!'content' in document.createElement('template')) { /* fallback */ } - 克隆后记得清空不需要的临时属性，比如
data-tmp-id - 如果 template 包含
<canvas></canvas>，克隆出来的 canvas 是空白的，需重新绘制
事情说清了就结束。真正麻烦的从来不是克隆动作本身，而是克隆之后那一堆要手动填的字段、要重新绑定的事件、要判断的浏览器分支。
