标签声明惰性 html 模板，内容不渲染、不执行、不加载资源；须置于 或 内，通过 tmpl.content.clonenode(true) 克隆后插入 dom，兼容性需降级处理 ie11。
直接用 <template></template> 标签就能定义不可见、不执行、不加载资源的 HTML 模板，关键在“声明即惰性”，后续靠 JavaScript 克隆后插入才真正生效。
模板声明要合法且干净
<template></template> 必须放在 或 内，不能嵌在 <script></script>、<style></style> 等禁止容器中。它的内容不会被渲染，也不触发任何副作用——图片不请求、脚本不运行、样式不计算。
- 给模板加唯一
id，比如<template id="item-tmpl"></template> - 内部写标准 HTML，如卡片、表格行、表单字段组，避免内联事件（如
onclick）或依赖全局 ID 的逻辑 - 不要指望用
innerHTML读取内容——它返回空字符串；内容藏在.content里
克隆必须用 content.cloneNode(true)
模板的 .content 是一个只读的 DocumentFragment，不能直接插入 DOM，也不能多次复用。每次使用都得深克隆一份独立副本。
- 获取模板：
const tmpl = document.querySelector('#item-tmpl'); - 克隆内容：
const fragment = tmpl.content.cloneNode(true); - 插入目标节点：
container.append(fragment);或container.appendChild(fragment); - 如果漏掉
cloneNode(true)，直接插tmpl.content会导致第一次成功、后续失败
插入后可安全修改内容
克隆出来的节点是真实 DOM 元素，支持常规操作：填文本、设属性、绑定事件、更新表单值，且保留全部 DOM 行为语义（比如 <input> 的当前输入值不会丢失）。
- 例如：
clone.querySelector('.title').textContent = '新标题'; - 再如：
clone.querySelector('img').src = '/avatar.jpg'; - 注意更新可能冲突的 ID 或
for/id关联的标签，避免重复 ID
兼容性与降级处理
<template></template> 在 IE11 及更早版本中不支持。需要检测并提供 fallback：
- 检测方式：
if (typeof HTMLTemplateElement === 'undefined') { /* 降级逻辑 */ } - 常见降级：用
<script type="text/template"></script>或隐藏<div style="display:none">，但语义弱、资源仍会加载<li>现代项目若无需支持 IE，可放心使用，无需 polyfill</li> </div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
