template.content.cloneNode(true)是唯一安全的克隆起点，必须深克隆才能保留表单状态、避免XSS、防止ID冲突及事件丢失，直接操作innerHTML或innerText会破坏结构且不安全。
template.content.cloneNode(true) 是唯一安全的克隆起点
直接 innerHTML = tmpl.innerHTML 或 innerText 替换占位符，会破坏表单状态、丢弃 select 选中项、忽略 input 的 checked/selected 属性，还可能引入 XSS。浏览器把 内容存为只读 DocumentFragment，藏在 content 属性里——你必须先取它，再克隆。
正确做法只有这一行：const fragment = tmpl.content.cloneNode(true)（注意是 cloneNode，不是 importNode；后者用于跨文档场景，日常组件实例化用前者更轻量）。
- 不 clone 直接
appendChild(tmpl.content)：内容被“搬走”，第二次调用时tmpl.content为空 - 克隆后若含
id，必须重设（如el.id = 'card-' + Date.now()），否则多个实例 ID 冲突 - 克隆节点默认不带事件监听器，需插入后手动绑定，或封装进工厂函数统一处理
data-* 属性是注入配置的合法且语义化通道
别往模板里硬写 uid="123" 或 theme=dark。W3C 只认 data- 开头的属性，JS 能通过 dataset 安全读取，且不会与未来 HTML 标准冲突。
例如：card.dataset.userId = 'abc123'; card.dataset.theme = 'dark'。
-
data-user-id="abc123"→ JS 中读作card.dataset.userId（自动驼峰转换） - 禁止用
data_、data:、大写开头（如DATA-ID）或数字开头（如data-1st-item） - 不要把配置塞进
class或id，它们不是数据容器，而是样式和定位锚点
填充文本/属性必须用语义化 API，而非 innerHTML 拼接
模板里放的是结构，不是字符串容器。用户输入、API 返回的文本内容，一律走 textContent；属性变更（如 src、href、data-*）用 setAttribute()；表单控件初始值不能靠写死 value="xxx"，得显式赋值 el.value = userData.phone。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
textContent自动转义 HTML 字符，防注入；innerHTML只在你明确需要渲染可信 HTML 片段时才用 - 含
的表单，克隆后要同步更新for和对应input#email的id，否则点击 label 不聚焦 - 用
dataset存上下文标识（如card.dataset.userId = '123'），比塞隐藏字段更轻量、更语义化
template 标签位置必须在 body 外层，且不可嵌套
必须作为顶层元素存在，不能包在 div、section 或其他组件内部。一旦被包裹，Safari 15.4 之前版本会丢弃其 content，导致 tmpl.content 为空 DocumentFragment，克隆后什么都没有。
典型错误写法：
- 正确位置：放在
后或前，与其它顶级元素平级 - 多个
可共存，但每个 ID 必须全局唯一 - 模板内禁止硬编码 ID（如
id="card-1"），会导致多次使用时重复，影响 CSS 或 JS 查询
真正难的不是克隆模板，而是让每次克隆出来的节点，在不同上下文里保持行为一致：ID 不冲突、label 能聚焦、data-* 被正确读取、文本不被注入攻击。这些细节不在语法层面报错，却会在上线后悄悄坏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
