template元素不渲染、不执行、不加载资源，是浏览器原生支持的离线dom片段容器；它通过content.clonenode(true)获取可操作副本，填值用textcontent/value，批量插入需documentfragment优化，且能规避xss、结构错乱及跨浏览器解析差异。
template 元素本身不渲染、不执行脚本、不加载资源，是浏览器原生支持的“离线 DOM 片段容器”——它能从根本上规避因动态拼接 HTML 字符串导致的结构错乱、XSS 风险和跨浏览器解析差异。
为什么直接 innerHTML 拼接 tr 会导致 Safari 和 Firefox 渲染不一致
浏览器对缺失 tbody 的表格容忍度不同：Chrome 可能自动补全并把 tr 插入到隐式 tbody 中，Firefox 可能拒绝插入或挂到 table 根节点下，Safari 则可能在重排时丢弃未闭合的 td。结果就是 document.querySelector('tbody').children.length 在各浏览器返回值不一。
- 必须显式写出
<tbody></tbody>，哪怕为空；所有 JS 渲染逻辑只操作该节点，不碰table直接子节点 - 避免用
innerHTML += '<tr>...</tr>'—— 这会强制浏览器重新解析整个tbody，触发多次重排，且破坏已有 input 焦点、滚动位置等状态 - 用
template+content.cloneNode(true)获取干净节点副本，再填值、插入，结构 100% 可控
template 如何解决 Flexbox 在 Safari 14–15 的塌陷问题
不是 template 本身修复 Flexbox，而是它让你能**安全地批量注入带预设样式的结构**。比如你在 template 里写的 <div class="flex-item" style="min-width: 0">，克隆后样式立即生效，不会被 Safari 对“未渲染时计算 width”的 bug 干扰。<ul>
<li>把带 fix 的完整结构（含 <code>min-width: 0、flex-shrink: 1 等）写死在 template 内，而非靠 JS 运行时 patch 样式
el.style.minWidth = '0' —— Safari 可能已在此前布局阶段完成错误计算，此时改无效@supports (display: -webkit-flex) 包裹 CSS 规则，而不是依赖 JS 检测 UAdata-* 属性读取失败？template 能绕过 EdgeHTML 的兼容性坑
旧版 Edge（EdgeHTML）不支持通过 el.dataset.xxx 访问自定义属性，但 getAttribute('data-xxx') 始终可用。而 template 内容在克隆前不进入 DOM，也就不会触发 EdgeHTML 的早期解析异常。
- 在
template中写<div data-id="123" data-status="active">，克隆后统一用 <code>el.getAttribute('data-id')读取 - 避免在
template中放内联事件处理器（如onclick），它们在克隆后不会自动绑定；改用事件委托或克隆后手动addEventListener - 如果项目还需支持 IE，需加 polyfill：
if (!HTMLTemplateElement) document.createElement('template');，但仅限创建元素，content属性仍不可用
真正容易被忽略的是：模板内容一旦克隆进 DOM，就彻底脱离 template 的保护层——后续所有 DOM 操作（比如修改 class、切换 display）都回归浏览器默认行为。所以 fix 必须前置到模板结构和初始样式中，而不是指望运行时补救。
