<template>的content必须克隆才能用，因其是只读DocumentFragment，直接appendChild会“搬走”内容导致后续静默失败；必须用cloneNode(true)或importNode获取可操作副本。
<template> 是唯一能真正跳过解析开销、避免 DOM 冲突的原生结构化标签。直接用 innerHTML 或 document.createElement 拼接，都会触发重复解析或强制重排。
为什么 <template> 的 content 必须克隆才能用
template.content 是只读的 DocumentFragment，不是普通节点树。直接 appendChild(template.content) 会把内容“搬走”，第二次调用就返回空文档片段——这导致后续渲染全部失败，且控制台不报错，极难排查。
- 必须用
document.importNode(template.content, true)或template.content.cloneNode(true)获取可操作副本 -
cloneNode(true)更常用，但注意它不会保留事件监听器或已绑定的data-状态 - 若需查子元素，得先克隆再
querySelector；在原始content上直接调用会返回null
<template> 里写 <script> 或 <style> 会怎样
全被忽略。浏览器明确不执行脚本、不加载图片、不解析样式——这是设计使然，不是 bug。你看到页面空白、资源没加载、点击无反应，大概率是因为误以为模板里的逻辑会自动激活。
- 动态行为必须手动绑定：
instance.querySelector('button').addEventListener('click', handler) - ID 冲突要主动处理：克隆后若存在重复
id="modal-close"，后续document.getElementById只取第一个 - 样式建议外置，或用
<style scoped>（仅对 Shadow DOM 有效），普通 DOM 中无效
表格、弹窗、评论区这类模块怎么安全注入
别拼字符串，也别直接 innerHTML = response.text()。服务端返回的 HTML 片段若含未闭合标签或顶层 <html>，插入后会破坏 DOM 结构，甚至让 <tbody> 被浏览器自动补全到错误位置。
立即学习“前端免费学习笔记（深入）”；
- 先创建临时
template元素：const tmp = document.createElement('template'); tmp.innerHTML = htmlStr; - 再取
tmp.content.cloneNode(true)，确保标签自动修正、属性正确解析 - 表格务必用显式
<tbody>包裹动态行，克隆后append到tbody，而非整个table - 批量插入多个节点时，先塞进
DocumentFragment，再一次性appendChild，避免反复触发 layout
最容易被忽略的是 hydration 边界：如果服务端已输出部分结构（比如 SSR 页面），又用 <template> 补充内容，ID、data-state、表单焦点这些状态不会自动同步，得靠 JS 显式接管或重置。
