本质是不渲染的dom存放区，浏览器解析时跳过其内容的激活、执行与渲染，仅存为documentfragment，需手动克隆后挂载才生效；而html4中可用模拟，但需注意type值非js类型、取内容用textcontent、转dom需解析。
template 标签本质是「不渲染的 DOM 存放区」
<template></template> 不是语法糖，也不是占位符。浏览器解析到它时，会跳过其内容的**激活、执行、渲染**——script 不运行，img 不加载，video 不缓冲，绑定的事件和 Vue/React 指令也完全不生效。它只把子节点存为一个 DocumentFragment，等你手动 cloneNode(true) 后再挂载，才真正“活”起来。
这意味着它天然适合做「模板复用」：一次定义，多次克隆，零副作用。比用 display: none 或 hidden 隐藏真实 DOM 安全得多——后者仍会触发资源加载、布局计算甚至 JS 执行。
HTML4 里没有 template，但可以用 script type 做等效替代
HTML4 时代没人能写 <template></template>，但开发者早就在用 <script type="text/template"></script>（或任意非 JS 的 type）来存放未激活的 HTML 字符串。关键是：浏览器不认识这个 type，就不会执行它里面的内容。
- 必须用
script元素（不能用div+display:none），否则 HTML4 解析器可能提前解析、执行内联脚本或加载图片 -
type值不能是text/javascript或空字符串，否则老浏览器会尝试执行 - 读取内容用
scriptElement.textContent，不是innerHTML（IE8- 不支持textContent，需降级用innerText或text）
<script type="text/x-template" id="user-card">
<div class="card">
<h3><span class="name"></span></h3>
<p><span class="email"></span></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/743" title="通义灵码"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679974577403.png" alt="通义灵码" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/743" title="通义灵码">通义灵码</a>
<p>阿里云出品的一款基于通义大模型的智能编码辅助工具，提供代码智能生成、研发智能问答能力</p>
</div>
<a href="/ai/743" title="通义灵码" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
</script>template 和 script type 模板的核心区别在 DOM 类型和 API
<template></template> 返回的是 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 = '<div>...</div>' ——这不会生效。因为 <template></template> 的 content 是只读的 DocumentFragment，直接改 innerHTML 不会同步到 content。正确做法是：
- 先清空
template.content（template.content.replaceChildren()或template.content.textContent = ''） - 再用
template.content.appendChild(div)或template.content.append(...nodes) - 或者干脆不用
template动态改，换用script[type]+ 字符串拼接，更可控
template 的设计哲学是「声明即静态」，运行时修改模板结构属于反模式，容易绕晕自己。
