<template>不参与文档流，因其内容被存为只读DocumentFragment、不插入DOM、不触发渲染与资源加载；仅克隆后插入真实容器才服从该位置的流规则。
HTML 模板本身不改变文档流，它只是复用结构的语法糖；真正决定元素如何排列的，是浏览器渲染时对 <template> 内容的“惰性处理” + 解包后插入位置的上下文流规则。
为什么 <template> 里的内容不参与初始文档流
<template> 是一个“离线容器”，它的子节点在解析阶段被移出主 DOM 树，不触发渲染、不计算样式、不响应事件、不占用布局空间。你可以把它理解为一个“未激活的 HTML 片段快照”。
常见错误现象：document.querySelector('template').content.querySelector('div') 能取到元素，但该 div 的 offsetTop 为 0、getComputedStyle 返回空对象、display 值为 none（实际是未计算）——这不是 bug，是规范行为。
使用场景：适合预定义弹窗结构、列表项模板、SVG 图标组等需要多次克隆但不希望提前影响布局的内容。
立即学习“前端免费学习笔记（深入）”；
- 不要在
<template>内写style或script（它们不会执行，除非手动提取并注入） - 不要依赖
<template>中元素的clientWidth等尺寸属性做逻辑判断 - 插入前务必用
content.cloneNode(true)，直接 appendcontent会移动原节点（只允许一次使用）
解包后元素立即服从插入点的文档流规则
一旦你调用 template.content.cloneNode(true) 并把结果 append 到某个真实父容器（比如 document.body 或一个 <div id="list">），这些元素就立刻按标准流规则参与布局：块级元素独占一行、行内元素水平排列、受父容器 display 类型（block/flex/grid）约束。
关键区别在于：<template> 不是“布局隔离区”，它只是“延迟挂载区”。它的内容没有特殊流行为，只有“尚未挂载”这一个状态。
性能影响：大量模板克隆 + 插入可能触发多次重排（reflow），尤其插入到文档流中部时。建议批量操作（如用 DocumentFragment 中转）或配合 display: contents 父容器减少包裹层级。
容易被忽略的三个细节
第一：<template> 内的 <slot> 不起作用——<template> 不支持 Web Components 的插槽机制，它只是静态 HTML 容器。
第二：CSS 选择器能匹配 <template> 内部元素（如 template div { color: red; }），但样式不会生效，直到元素被挂载到主 DOM。
第三：模板中写的 id="xxx" 在多次克隆后会导致 ID 重复，破坏语义和 getElementById 行为，应改用 data-id 或运行时动态生成 ID。
