不参与文档流，因其内容被存为只读documentfragment、不插入dom、不触发渲染与资源加载；仅克隆后插入真实容器才服从该位置的流规则。

HTML 模板本身不改变文档流，它只是复用结构的语法糖；真正决定元素如何排列的，是浏览器渲染时对 <template></template> 内容的“惰性处理” + 解包后插入位置的上下文流规则。

为什么 <template></template> 里的内容不参与初始文档流

<template></template> 是一个“离线容器”，它的子节点在解析阶段被移出主 DOM 树，不触发渲染、不计算样式、不响应事件、不占用布局空间。你可以把它理解为一个“未激活的 HTML 片段快照”。

常见错误现象：document.querySelector('template').content.querySelector('div') 能取到元素，但该 div 的 offsetTop 为 0、getComputedStyle 返回空对象、display 值为 none（实际是未计算）——这不是 bug，是规范行为。

使用场景：适合预定义弹窗结构、列表项模板、SVG 图标组等需要多次克隆但不希望提前影响布局的内容。

• 不要在 <template></template> 内写 style 或 script（它们不会执行，除非手动提取并注入）
• 不要依赖 <template></template> 中元素的 clientWidth 等尺寸属性做逻辑判断
• 插入前务必用 content.cloneNode(true)，直接 append content 会移动原节点（只允许一次使用）

解包后元素立即服从插入点的文档流规则

一旦你调用 template.content.cloneNode(true) 并把结果 append 到某个真实父容器（比如 document.body 或一个 <div id="list">），这些元素就<strong>立刻按标准流规则参与布局</strong>：块级元素独占一行、行内元素水平排列、受父容器 <code>display 类型（block/flex/grid）约束。

关键区别在于：<template></template> 不是“布局隔离区”，它只是“延迟挂载区”。它的内容没有特殊流行为，只有“尚未挂载”这一个状态。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

性能影响：大量模板克隆 + 插入可能触发多次重排（reflow），尤其插入到文档流中部时。建议批量操作（如用 DocumentFragment 中转）或配合 display: contents 父容器减少包裹层级。

容易被忽略的三个细节

第一：<template></template> 内的 <slot></slot> 不起作用——<template></template> 不支持 Web Components 的插槽机制，它只是静态 HTML 容器。

第二：CSS 选择器能匹配 <template></template> 内部元素（如 template div { color: red; }），但样式不会生效，直到元素被挂载到主 DOM。

第三：模板中写的 id="xxx" 在多次克隆后会导致 ID 重复，破坏语义和 getElementById 行为，应改用 data-id 或运行时动态生成 ID。