template标签内必须只包含元素或注释节点，纯文本会导致content.firstchild.nodetype为3而被多数框架忽略；其内部script/style不执行；content是documentfragment而非htmlcollection；嵌套template不会自动解析。

HTML模板没有“唯一正确”的标签结构，但存在必须满足的DOM节点层级约束——违反它会导致解析失败、渲染异常或脚本行为不可靠。

template 标签内不能直接写文本或块级元素

<template></template> 是一个特殊的包裹容器，它的内容在解析时不会被渲染，也不会被加入活动DOM树。但它的子节点必须是合法的、可嵌套的节点类型。

• ❌ 错误：直接在 <template></template> 下写纯文本或换行 —— 浏览器会自动将其包装成 Text 节点，但该节点父级不是元素节点，不符合 DOM 规范中“template 只能包含元素节点或注释节点”的隐含要求（实际表现为内容丢失或 content 为空）
• ✅ 正确：所有内容必须包裹在至少一个元素节点内，比如 <div>、<code><article></article> 或 <span></span>
• ⚠️ 注意：<template><p>hello</p></template> 合法；<template>hello</template> 表面上能运行，但 template.content.firstChild.nodeType 会是 3（文本节点），而很多模板工具（如 Lit、Vue 的 <template></template> 编译逻辑）默认只遍历元素子节点，导致漏处理

script 和 style 标签在 template 中不执行也不生效

<template></template> 内部的 <script></script> 和 <style></style> 不会被浏览器解析、执行或应用——它们只是静态节点，nodeType === 1（元素节点），但不会触发任何副作用。


anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
• ❌ 试图在 <template></template> 里内联 <script>console.log('run')</script>：控制台不会输出，且该节点克隆后仍无执行能力
• ✅ 如需动态行为，应在模板实例化后（即调用 template.content.cloneNode(true) 插入文档后），再手动注入脚本或绑定事件
• ? 小技巧：如果想让样式随模板一起复用，可用 <style></style> + :host 或 CSS 自定义属性，但必须配合 Shadow DOM 使用；否则应把样式抽离到外部或全局作用域

template.content 返回 DocumentFragment，不是 HTMLCollection

很多人误以为 template.content 是类似 getElementsByClassName 返回的集合，其实它是 DocumentFragment 类型——一个轻量级 DOM 容器，没有父节点，可以安全地 append/insert 多次而不触发重排。

• ❌ 错误：对 template.content 调用 .forEach 或 .length —— 它不是数组也不是 HTMLCollection，没有这些属性
• ✅ 正确做法：用 template.content.children（返回 HTMLCollection）或 template.content.querySelectorAll('*') 获取可遍历节点
• ⚠️ 关键区别：template.content.children 只包含顶层元素子节点；template.content.childNodes 包含所有子节点（含文本、注释），容易踩空或遍历到空白文本节点

嵌套 template 标签不会递归解析

<template></template> 不支持“模板中的模板”自动展开。内部嵌套的 <template></template> 会被当作普通元素节点保留，不会提前解析其 content。

• ❌ 示例：<template id="outer"><template id="inner"><span>data</span></template></template> —— outer.content.querySelector('template').content 依然需要手动调用，不会自动扁平化
• ✅ 若需多层模板组合，应显式提取并克隆：先取 inner.content.cloneNode(true)，再插入到 outer.content 中对应位置
• ? 实际项目中，更推荐用函数封装模板生成逻辑（如 renderItem(data)），而非依赖嵌套 <template></template> 结构，后者难以调试且破坏节点语义

真正容易被忽略的是：DOM 节点类型判断比标签名更重要。哪怕结构看起来“闭合了”，如果 template.content.firstChild.nodeType !== 1（即不是元素节点），后续所有基于 .children 或 .querySelector 的操作都可能静默失败。