本质是不渲染的DOM存放区，浏览器解析时跳过其内容的激活、执行与渲染，仅存为DocumentFragment，需手动克隆后挂载才生效；而HTML4中可用模拟，但需注意type值非JS类型、取内容用textContent、转DOM需解析。
template 标签本质是「不渲染的 DOM 存放区」
不是语法糖，也不是占位符。浏览器解析到它时，会跳过其内容的**激活、执行、渲染**——script 不运行，img 不加载，video 不缓冲，绑定的事件和 Vue/React 指令也完全不生效。它只把子节点存为一个 DocumentFragment，等你手动 cloneNode(true) 后再挂载，才真正“活”起来。
这意味着它天然适合做「模板复用」：一次定义，多次克隆，零副作用。比用 display: none 或 hidden 隐藏真实 DOM 安全得多——后者仍会触发资源加载、布局计算甚至 JS 执行。
HTML4 里没有 template，但可以用 script type 做等效替代
HTML4 时代没人能写 ，但开发者早就在用 （或任意非 JS 的 type）来存放未激活的 HTML 字符串。关键是：浏览器不认识这个 type，就不会执行它里面的内容。
- 必须用
script元素（不能用div+display:none），否则 HTML4 解析器可能提前解析、执行内联脚本或加载图片 -
type值不能是text/javascript或空字符串，否则老浏览器会尝试执行 - 读取内容用
scriptElement.textContent，不是innerHTML（IE8- 不支持textContent，需降级用innerText或text
）
）template 和 script type 模板的核心区别在 DOM 类型和 API
返回的是 DocumentFragment，可直接 append()；而 script[type] 存的是字符串，必须先 DOMParser 或 innerHTML 转成节点，再操作。这带来三个实际影响：
- 安全性：
template天然防 XSS（内容不解析），script[type]若用innerHTML = str就可能执行内联onerror等 - 性能：
template.content.cloneNode(true)比反复innerHTML解析快，尤其结构复杂时 - 兼容性：
template在 IE 完全不支持（哪怕 IE11），script[type]可以从 IE6 用到现代浏览器
别直接 innerHTML 到 template 内部
有人想动态生成模板内容，写 document.querySelector('template').innerHTML = '...' ——这不会生效。因为 的 content 是只读的 DocumentFragment，直接改 innerHTML 不会同步到 content。正确做法是：
- 先清空
template.content（template.content.replaceChildren()或template.content.textContent = ''） - 再用
template.content.appendChild(div)或template.content.append(...nodes) - 或者干脆不用
template动态改，换用script[type]+ 字符串拼接，更可控
template 的设计哲学是「声明即静态」，运行时修改模板结构属于反模式，容易绕晕自己。
