template必须为顶层元素，否则旧版浏览器丢弃content；克隆后需重设id并同步更新关联属性；禁用innerHTML处理用户数据以防XSS；跨域资源须声明crossorigin才能读取元数据。
template 标签被嵌套时 content 为空怎么办
template 元素一旦被包在 div、section 或任何其他标签里，Safari 15.4 之前版本和部分旧版 Chromium 会直接丢弃其 content，导致 template.content.cloneNode(true) 返回空的 DocumentFragment——后续所有克隆、填充、插入操作都无声失败。
- 必须确保
template是顶层元素，直接放在body下或与body同级（如放在body后、script前） - 不要用 Vue/React 的模板语法包裹它（比如
<div v-if="show"><template>...</template></div>），运行时 DOM 结构会被重写，content就没了 - 检查方式很简单：在 DevTools Console 执行
document.querySelector('template').content.childNodes.length，如果不是预期数量，八成是位置错了
克隆后 id 冲突导致 document.getElementById 失效
多个实例共用相同 id 是跨域复用模板时最隐蔽的质量污染源。浏览器只保证单页内 id 唯一，但模板克隆不自动重命名——你调用 document.getElementById('submit-btn') 可能拿到第一个、最后一个，甚至随机一个，取决于解析顺序。
- 克隆后必须重设所有
id属性：clonedEl.id = 'submit-btn-' + Date.now()或用更稳定的哈希生成 - 关联型属性（如
label[for]和对应input#id）必须同步更新，否则点击 label 不聚焦输入框 - 避免依赖
id做逻辑判断；改用dataset或 class 选择器（如.js-submit-trigger）更可靠
innerHTML 拼接用户数据引发 XSS 的典型误判
很多人以为“只用在 template 里，又没直接插入页面”，就放松对字符串拼接的警惕。但只要执行了 el.innerHTML = userInput，无论在哪，XSS 风险就已成立——尤其当模板被跨域加载、复用到不同上下文时，攻击面会指数级扩大。
- 永远不用
innerHTML填充不可信内容；文本走textContent，属性走setAttribute()，表单值赋el.value或el.checked - 富文本渲染必须走可信白名单过滤（如
DOMPurify.sanitize(html)），且不能跳过crossorigin和integrity校验 - 注意
srcdoc属性：它等价于内联 iframe 页面，直接执行 HTML，比innerHTML更危险，审查时要单独标红
crossorigin 未声明却读取 naturalWidth 等元数据
跨域图片、字体、脚本资源若未声明 crossorigin，JS 就无法读取其尺寸、状态或响应体——这不是报错，而是静默返回默认值（如 img.naturalWidth === 0）。这种“看起来能跑”的假象，会让模板在本地开发时一切正常，上线后突然卡死或布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 所有需 JS 读取元数据的跨域资源，必须显式加
crossorigin="anonymous"（或"use-credentials"） - 加了
crossorigin但服务端没配Access-Control-Allow-Origin，请求会被静默拒绝，Network 面板里看不到响应，只能靠 Console 报错定位 -
integrity必须与crossorigin共存才生效；单写integrity不校验，等于没设防
id 和 crossorigin，比后期查三天 DOM 状态更省时间。 
