template标签不参与渲染，其内容存储在只读的content属性中，为DocumentFragment，不会插入DOM、不加载资源、不执行脚本；必须克隆后手动插入才能生效。
template 标签本身不参与文档渲染，它只是静态存储一段“未激活”的 HTML 结构，在解析时被浏览器识别为一个文档片段（DocumentFragment）容器，内容保留在其 content 属性中，**不会插入到 DOM 树中，也不触发任何资源加载或脚本执行**。
template 的内容天生“离线”
浏览器在构建 DOM 时，会跳过 template 元素的子节点——它们不会成为其父元素的子节点，也不会出现在 document.body.children 或其他常规遍历结果中。即使写成这样：
<body>
<template id="card">
<div class="card"><h3>标题</h3><p>内容</p></div>
</template>
</body>
该 <div class="card"> 永远不会出现在渲染树里，也查不到它的 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>）不会生效，媒体查询不计算 -
<img src="...">不发起网络请求 -
<script>不执行，且 script 元素的type属性会被忽略（除非显式设置为text/template等非 JS 类型） - 所有事件监听器、自定义元素升级、表单关联（如
for指向）均不激活
占位逻辑的本质：延迟实例化容器
template 不是“占位符”，而是“模板容器”。它不预留空间、不撑开布局、不参与流式排版。它的存在只为提供一种语义清晰、安全可靠的 HTML 片段封装机制。所谓“占位”，其实是开发者用 JS 主动调用 cloneNode + appendChild 后，新节点才真正进入文档流并占据空间。
