<template>元素仅作模板不渲染，需用document.importNode克隆并手动填充数据；纯template无响应式能力，须配合Custom Elements API实现组件化封装。
template 元素本身不执行、不渲染，必须手动克隆才能用
很多人把 <template id="card"><div>{{title}}</div></template> 写完就以为组件 ready 了——结果页面空白。浏览器对 <template> 的处理是跳过解析：里面 <script> 不执行、<img> 不加载、data-* 属性不触发 JS 监听，它只是个“模具”，不是“零件”。
常见错误包括：
- 直接
el.innerHTML = template.innerHTML—— 会丢失<input checked>状态、重置<select>选中项 - 用
cloneNode(true)后插入，但模板里有<script>或<style>—— 它们不会自动运行或生效 - 写
{{title}}却指望浏览器自动替换 —— 原生 HTML 不识别任何插值语法
正确做法是用 document.importNode(tmpl.content, true) 获取可安全挂载的文档片段，再遍历节点手动填充数据。
如何让 template 支持传参和复用，而不是每次重写 HTML
纯 <template> 没有属性监听、没有生命周期，所谓“传参”本质是调用 JS 工厂函数时传入对象，再映射到 DOM 节点。它适合静态内容或低频交互场景，不是响应式框架替代品。
立即学习“前端免费学习笔记（深入）”；
实操要点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 模板内用
data-bind="title"替代 class 名（如class="card-title"），避免样式类与逻辑耦合 - 工厂函数返回
DocumentFragment，而非字符串 —— 避免重复解析、保留事件绑定上下文 - 首次生成后缓存节点，后续只更新
textContent或dataset值，不重新克隆 - 禁止在模板里硬编码
id="card-1"—— 多次使用会导致 ID 冲突，影响 CSS 查询或 JSgetElementById
customElements.define() 才算真正封装，template 只是起点
如果你需要属性变更自动更新视图、样式默认隔离、自带挂载/卸载时机，<template> 必须配合 Custom Elements API 才能升级为完整组件。否则就是一堆手动拼装的 DOM 片段，没契约、无约束、难维护。
关键陷阱：
- 注册名不含短横线（如
"usercard"）→ 浏览器拒绝识别，报错Failed to execute 'define' on 'CustomElementRegistry' - 构造函数里没调用
super()→ 报Failed to construct 'CustomElement' - 在
constructor中操作this.shadowRoot→ 此时 shadow root 尚未创建，会是null - 想响应
title属性变化，却忘了声明static get observedAttributes() { return ['title']; }和实现attributeChangedCallback
<slot> 是内容分发唯一标准方式；别试图用 querySelector 穿透 Shadow DOM 取子元素 —— closed mode 下根本查不到。
fetch + innerHTML 加载模板的硬伤在哪
很多人用 fetch('header.html').then(r => r.text()).then(html => el.innerHTML = html) 加载片段，看似简单，实际在真实环境中极易崩：
- 本地双击打开 HTML 文件时，
file://协议触发 CORS，fetch直接失败 —— 必须起本地服务（如npx serve） - 每次加载都发请求，无缓存、不可预编译，不适合高频复用（比如侧边栏在 20 个页面都这么加载）
- 插入的 HTML 中的内联脚本（
<script>console.log(1)</script>）不会执行，需手动eval或创建script标签再append - 没有作用域隔离：样式泄漏、事件监听器污染全局、
id冲突无法避免
真正的问题不在“怎么拆出 HTML 片段”，而在于“谁负责初始化、传参、更新、销毁”。<template> 是容器，customElements.define() 才带生命周期和封装契约。
