HTML模板复用效果取决于使用机制而非模板标签本身；<template>是静态容器，需cloneNode复用；Jinja2与Go模板语法不兼容；fetch注入有SEO和执行上下文问题；Web Components支持跨框架复用但无内置数据绑定。
HTML模板本身不直接影响内容复用效果，真正起决定作用的是你用什么机制去“使用”它——<template> 标签只是个容器，extends 是 Jinja2 的语法，{{template}} 是 Go 的 html/template 指令，它们互不兼容，混用就失效。
为什么直接写 <template> 不会自动复用内容
<template> 是纯静态容器，浏览器解析时跳过其内容，不执行脚本、不加载图片、不触发任何 DOM 生命周期。它不提供任何自动注入逻辑，也不认识 include 或 extends 这类概念。
- 常见错误现象：
document.querySelector('template').innerHTML取到空字符串（因为内容在content属性里） - 直接
appendChild(template)会把原节点移走，第二次调用就拿不到内容了 - 必须显式调用
template.content.cloneNode(true)才能安全复用 - 克隆后若含
<input name="email">，不重置name和id会导致多实例提交冲突或label[for]失效
Jinja2 的 extends 和 Go 的 {{template}} 不能混用
两者语法形似但运行环境完全隔离：Jinja2 在 Flask 启动时由 Python 解析并生成最终 HTML；Go 的 html/template 在 HTTP handler 中执行，且依赖 ParseFiles 或手动 New().Parse() 显式注册子模板。
- 你在 Jinja2 模板里写
{{template "header" .}}—— 渲染时直接报错，Jinja2 不认识这个语法 - 你在 Go 模板里写
{% extends "base.html" %}——html/template会把它当普通文本输出，不解析 - 参数差异：Jinja2 的
{% block content %}是占位符；Go 的{{template "name" .}}要求先用t.New("name").Parse(...)注册，否则 panic - 性能影响：Jinja2 继承在服务启动时编译一次；Go 模板若每次请求都
ParseFiles，会显著拖慢响应
fetch + innerHTML 动态注入的实际限制
这是纯前端无构建场景下最常用的“伪复用”，但它绕过了模板系统，本质是字符串拼接，容易踩坑。
立即学习“前端免费学习笔记（深入）”；
- 常见错误现象：页面首次渲染空白（FOUC），尤其在 CSP 严格策略下
fetch('nav.html')被拦截，控制台报Refused to connect - 加载失败时没有 fallback，
document.getElementById('nav').innerHTML = ''直接留白 -
innerHTML = data会丢掉原始<script>执行上下文，动态表单校验、第三方 SDK 初始化全失效 - SEO 友好性差：爬虫看到的是空容器，不会等待 JS 注入完成
- 更稳妥做法：用
fetch获取后，用DOMParser解析为文档，再遍历节点用textContent设置文本内容，防 XSS
Web Components 是唯一跨框架复用方案，但要注意 Shadow DOM 隔离
自定义元素 + <slot> 是目前唯一不依赖构建工具、服务端或框架就能实现真正封装的复用方式，但它的样式和事件边界很明确。
- Shadow DOM 内部样式不会泄漏，外部 CSS 也无法穿透选中内部元素（除非用
::slotted()） -
<my-header><h1 slot="title">Dashboard</h1></my-header>中的<h1>会投射进<slot name="title">，但无法用document.querySelector('my-header h1')直接获取 - 若需统一管理全局样式（如字体、主题色），得靠 CSS 自定义属性 +
:host传递，不能依赖外层 class - 兼容性：Chrome/Firefox/Edge 全支持；Safari 16.4+ 支持完整功能，旧版 Safari 对
<slot>的 fallback 行为处理不一致
最容易被忽略的一点：所有复用方案都解决不了数据绑定问题。<template> 是静态结构，Jinja2 是服务端渲染，fetch 是字符串替换，Web Components 默认不带响应式——你要显示用户姓名，就得自己监听数据变化、手动更新 DOM，没人替你做 v-model 或 useState 那套事。
