17370845950

本质是不渲染的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 的设计哲学是「声明即静态」，运行时修改模板结构属于反模式，容易绕晕自己。