HTML模板不是字符串而是解析器输入源，浏览器在HTML解析阶段识别<template>标签并跳过其子节点DOM构建，仅保留空HTMLTemplateElement节点，内容存于已解析的DocumentFragment中。
HTML模板不是字符串，是解析器的输入源
浏览器从不把 <template> 里的内容当普通字符串处理。它在 HTML 解析阶段就识别出 <template> 标签，直接跳过其子节点的 DOM 构建，只保留一个空的 HTMLTemplateElement 节点。里面的 HTML 片段被挂载到该节点的 content 属性上，且是一个已解析好的 DocumentFragment —— 这意味着你拿到的不是原始文本，而是结构化的节点树。
常见错误：用 innerHTML 读取 <template> 内容再拼接字符串，结果丢失事件监听器、<script> 不执行、<slot> 位置错乱。正确做法是克隆 template.content：
const tmpl = document.querySelector('template');
const fragment = tmpl.content.cloneNode(true); // true 表示深克隆
root.appendChild(fragment);template.content 的 DOM 节点不自动升级自定义元素
即使你已调用 customElements.define('my-button', MyButton)，把 <my-button> 放进 <template> 后，它在 template.content 中仍是 HTMLUnknownElement。因为解析器遇到未知标签时，只查当前全局 CustomElementRegistry；而 <template> 的内容不在主文档流中，不触发注册表匹配流程。
必须手动 upgrade：
立即学习“前端免费学习笔记（深入）”；
- 克隆后调用
customElements.upgrade(fragment) - 或遍历 fragment 子节点，对每个
HTMLUnknownElement检查标签名是否已注册，再显式 new 实例 - 注意：upgrade 不会触发
connectedCallback，仅补初始化逻辑（如属性反射），真正挂载后才触发生命周期
动态插入 template 内容时，connectedCallback 触发时机不可靠
把克隆的 fragment 插入 DOM 后，其中的自定义元素会立刻触发 connectedCallback。但此时元素可能尚未完成 layout，父容器尺寸未计算，Shadow DOM 尚未 attach，甚至 document.body.contains(this) 都可能返回 false。
安全写法只有两种：
requestAnimationFrame(() => { this.attachShadow({ mode: 'open' }); /* render */ })- 用
MutationObserver监听自身是否出现在document.documentElement的后代中，再执行渲染逻辑
别依赖 setTimeout 或 “等一会儿”，微任务队列里 connectedCallback 和样式计算的顺序在不同浏览器中不一致。
服务端模板与客户端 template 标签本质不同
服务端模板（如 EJS、Handlebars）输出的是纯 HTML 字符串，浏览器收到后才开始解析；而 <template> 是浏览器原生机制，内容在首次解析 HTML 时就已构建为节点树，不参与主文档渲染流。两者不能混用逻辑。
典型陷阱：
- 在服务端生成含
<my-button>的字符串，再用innerHTML注入到<template>中 —— 这样得到的是未解析的文本，不是可 upgrade 的节点 - 误以为
template.innerHTML = '<my-button></my-button>'会自动注册或升级，实际只是覆盖 content 的文本内容，丢弃原有节点结构 - SSR 渲染时，若服务端没执行
define()，客户端首次 hydrate 时必须确保所有自定义元素已注册，否则upgrade失败
真正关键的分界点在于：模板内容何时进入浏览器的解析管线 —— 字节流阶段？还是 JS 执行阶段？差这一毫秒，DOM 状态就完全不同。
