template标签内必须只包含元素或注释节点，纯文本会导致content.firstChild.nodeType为3而被多数框架忽略；其内部script/style不执行；content是DocumentFragment而非HTMLCollection；嵌套template不会自动解析。
HTML模板没有“唯一正确”的标签结构，但存在必须满足的DOM节点层级约束——违反它会导致解析失败、渲染异常或脚本行为不可靠。
template 标签内不能直接写文本或块级元素
<template> 是一个特殊的包裹容器，它的内容在解析时不会被渲染，也不会被加入活动DOM树。但它的子节点必须是合法的、可嵌套的节点类型。
- ❌ 错误：直接在
<template>下写纯文本或换行 —— 浏览器会自动将其包装成Text节点，但该节点父级不是元素节点，不符合 DOM 规范中“template只能包含元素节点或注释节点”的隐含要求（实际表现为内容丢失或content为空） - ✅ 正确：所有内容必须包裹在至少一个元素节点内，比如
<div>、<article>或<span> - ⚠️ 注意：
<template><p>hello</p></template>合法；<template>hello</template>表面上能运行，但template.content.firstChild.nodeType会是3（文本节点），而很多模板工具（如 Lit、Vue 的<template>编译逻辑）默认只遍历元素子节点，导致漏处理
script 和 style 标签在 template 中不执行也不生效
<template> 内部的 <script> 和 <style> 不会被浏览器解析、执行或应用——它们只是静态节点，nodeType === 1（元素节点），但不会触发任何副作用。
- ❌ 试图在
<template>里内联<script>console.log('run')</script>：控制台不会输出，且该节点克隆后仍无执行能力 - ✅ 如需动态行为，应在模板实例化后（即调用
template.content.cloneNode(true)插入文档后），再手动注入脚本或绑定事件 - ? 小技巧：如果想让样式随模板一起复用，可用
<style>+:host或 CSS 自定义属性，但必须配合 Shadow DOM 使用；否则应把样式抽离到外部或全局作用域
template.content 返回 DocumentFragment，不是 HTMLCollection
很多人误以为 template.content 是类似 getElementsByClassName 返回的集合，其实它是 DocumentFragment 类型——一个轻量级 DOM 容器，没有父节点，可以安全地 append/insert 多次而不触发重排。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：对
template.content调用.forEach或.length—— 它不是数组也不是 HTMLCollection，没有这些属性 - ✅ 正确做法：用
template.content.children（返回HTMLCollection）或template.content.querySelectorAll('*')获取可遍历节点 - ⚠️ 关键区别：
template.content.children只包含顶层元素子节点；template.content.childNodes包含所有子节点（含文本、注释），容易踩空或遍历到空白文本节点
嵌套 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>结构，后者难以调试且破坏节点语义
真正容易被忽略的是：DOM 节点类型判断比标签名更重要。哪怕结构看起来“闭合了”，如果 template.content.firstChild.nodeType !== 1（即不是元素节点），后续所有基于 .children 或 .querySelector 的操作都可能静默失败。
