不参与文档流且不可见，因其内容被存为只读DocumentFragment、不插入DOM、不渲染、不加载资源；必须通过content.cloneNode(true)克隆后插入真实容器才生效。
<template></template> 不是隐藏元素，也不参与渲染流程——它根本不会出现在 DOM 树里，连 display: none 都不是。它的作用只有一个：在 HTML 中安全地“存”一段结构，等 JS 显式取出来、克隆、再插入，才真正活过来。
为什么 template.innerHTML 始终为空？
因为 <template></template> 的内容被浏览器解析后，全部塞进了只读的 content 属性（类型是 DocumentFragment），而不是作为子节点挂在元素上。所以：
-
template.children返回空 NodeList -
template.firstElementChild是null -
template.innerHTML永远返回空字符串"" - 必须用
template.content访问内部结构
克隆 template 内容的唯一正确写法
直接 appendChild(template.content) 会静默失败——content 是一个 DocumentFragment，只能被插入一次。下次再插，它就从原位置“搬家”过去，不会复制。
正确做法永远是深克隆：
立即学习“前端免费学习笔记（深入）”；
const tmpl = document.getElementById('item-tmpl');
const clone = tmpl.content.cloneNode(true); // ✅ 必须加 true
container.appendChild(clone);
- 不加
true只克隆顶层，嵌套结构丢失 - 不能缓存
tmpl.content复用，每次都要重新cloneNode(true) - 若需批量插入，先克隆多个到一个
DocumentFragment，再一次性 append，减少重排
表单控件和事件在 template 里会怎样？
模板里的 <input value="a"> 克隆后，value 仍是 "a"，但不会反映用户当前输入；onclick 属性无效，addEventListener 更不会自动绑定。
- 克隆后要手动初始化：比如
clone.querySelector('input').value = '' - 事件必须重新绑定，或改用事件委托（如监听父容器，用
event.target.matches('.btn')判断） -
<img src alt="HTML模版template怎么用_HTML文档片段隐藏存储" >不发请求，<script></script>不执行，<video autoplay></video>不播放——全被“冻住”
IE 浏览器不支持 template 怎么办？
IE 完全没实现 <template></template>，连 document.createElement('template') 创建的元素也没有 content 属性。
若需兼容，必须引入 polyfill，例如：
if (!document.createElement('template').content) {
const t = document.createElement('template');
t.content = document.createDocumentFragment();
// 后续还需补全 cloneNode 行为等
}
更稳妥的做法是：现代项目默认不兼容 IE；真要支持，建议用构建时预编译 + innerHTML 字符串模板替代，别硬扛运行时 polyfill。
真正容易被忽略的是：<template></template> 的“惰性”不是靠 CSS 或属性控制的，它是浏览器级的解析隔离机制——这意味着你不能靠审查元素看到它的子节点，也不能用 CSS 选中它里面的内容，更不能指望它响应任何样式继承或伪类。它就是一个离线蓝图，仅此而已。
