template标签内容不自动渲染，因其被浏览器解析为离线documentfragment，不构建dom、不执行脚本、不加载资源；必须通过content.clonenode(true)克隆后插入才可见。
浏览器不解析 HTML 模板标签，<template></template> 本身不会渲染任何内容——它只是个“存储柜”，内容必须由 JS 显式克隆并插入 DOM 才能显示。
为什么 <template></template> 内容不自动渲染
浏览器在解析 HTML 时会跳过 <template></template> 的内容，将其存入文档片段（DocumentFragment），不构建 DOM 节点、不执行脚本、不加载图片或样式。这是设计使然，不是 bug。
- 常见错误：直接写
<template><header>...</header></template>就以为 header 会出现——实际页面空白 -
<template></template>里不能有<script></script>或<style></style>标签；即使写了，也不会执行或生效 - 若用
innerHTML读取<template></template>内容再赋值给其他元素，会丢失事件绑定和 Shadow DOM 上下文
如何正确克隆并插入 <template></template> 内容
必须手动调用 content.cloneNode(true)，再通过 appendChild() 或 insertAdjacentElement() 插入目标容器。
- 别用
document.querySelector('template').innerHTML—— 它返回的是字符串，不是可操作的节点树 - 克隆后若需修改文本或属性，应在克隆节点上操作，而非原
<template></template>内容 - 若插入到 Shadow DOM 中（如 Web Components），必须用
this.shadowRoot.appendChild(...)，不能用document.body.appendChild - 频繁插入大量实例时，建议先创建 DocumentFragment 批量 append，再一次性插入 DOM，减少重排
与 Web Components 结合时的绘制优化要点
用 <template></template> 配合 Custom Elements 是目前唯一零构建、纯前端可复用组件的方式，但默认行为容易导致意外白屏或样式断裂。
-
customElements.define()名称必须含短横线（如'card-item'），否则注册失败且无报错 - Shadow DOM 默认为
mode: 'closed'，外部 CSS 无法穿透；要继承全局样式，得显式设为mode: 'open' -
<slot></slot>是内容分发入口，但若模板中没写<slot></slot>，传入的子节点会被丢弃——不是隐藏，是彻底不进 shadowRoot - 首次渲染后，若需响应属性变更（如
data-id更新），必须在attributeChangedCallback中手动更新 DOM，<template></template>不会自动重渲染
真正卡住人的地方不在怎么写模板，而在「什么时候、在哪一层级、用什么 API 插入」——DOM 层、Shadow DOM 层、DocumentFragment 层的行为完全不同，混用就丢节点、失样式、漏事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
