template标签不参与渲染，其内容存储在只读的content属性中，为documentfragment，不会插入dom、不加载资源、不执行脚本；必须克隆后手动插入才能生效。

template 标签本身不参与文档渲染，它只是静态存储一段“未激活”的 HTML 结构，在解析时被浏览器识别为一个文档片段（DocumentFragment）容器，内容保留在其 content 属性中，**不会插入到 DOM 树中，也不触发任何资源加载或脚本执行**。

template 的内容天生“离线”

浏览器在构建 DOM 时，会跳过 template 元素的子节点——它们不会成为其父元素的子节点，也不会出现在 document.body.children 或其他常规遍历结果中。即使写成这样：

  

该 <div class="card"> 永远不会出现在渲染树里，也查不到它的 <code>offsetParent、不会响应 CSS 选择器匹配，更不会触发 img 的加载或 script 的运行。

content 属性是访问真实结构的唯一入口

template.content 是一个只读的 DocumentFragment，它包裹了 template 内部所有节点（包括文本、注释、元素）。必须显式克隆并插入才能生效：

• 直接访问 template.content.firstElementChild 可获取结构，但不能直接 append 到页面（会移动原节点）
• 推荐用 template.content.cloneNode(true) 创建副本，再插入目标位置
• 若未克隆而直接 appendChild(template.content)，会导致 template 内容被清空（因为 DocumentFragment 只能有一个父节点）

与普通元素的关键区别：无渲染上下文

template 不属于活动 DOM，因此：

• 内部样式表（<style></style>）不会生效，媒体查询不计算
• <img src="..."> 不发起网络请求
• <script></script> 不执行，且 script 元素的 type 属性会被忽略（除非显式设置为 text/template 等非 JS 类型）
• 所有事件监听器、自定义元素升级、表单关联（如 for 指向）均不激活

占位逻辑的本质：延迟实例化容器

template 不是“占位符”，而是“模板容器”。它不预留空间、不撑开布局、不参与流式排版。它的存在只为提供一种语义清晰、安全可靠的 HTML 片段封装机制。所谓“占位”，其实是开发者用 JS 主动调用 cloneNode + appendChild 后，新节点才真正进入文档流并占据空间。