无法跨页面复用，因其仅存在于当前页面DOM内存中，页面卸载即销毁；可行方案包括JavaScript动态加载、Web Components封装及构建工具预处理。
<template></template> 本身不支持跨页面复用——它只在当前 HTML 文档内生效，刷新或跳转到新页面后，<template></template> 内容不会自动带过去，也不会被其他页面读取。想靠它“一份写、多页用”，直接行不通。
为什么 <template></template> 不能跨页面复用
浏览器把每个 HTML 文件当独立上下文处理。<template></template> 是 DOM 节点，只存在于当前页面的内存中；页面卸载时整个 DOM 被销毁，模板自然消失。它不是文件、不是模块、也不参与网络请求，纯属本地结构占位符。
- 你无法在 page2.html 中用
document.getElementById('my-template')拿到 page1.html 里定义的模板 - 即使把模板代码复制进每个页面，也违背“复用”本意——改一处还得手动同步所有页面
-
<template></template>不触发渲染，但也不提供加载、缓存、路径解析等能力，无法替代文件引用机制
真正能跨页面复用的方案只有三种可行路径
要让同一套 HTML 结构出现在多个页面且集中维护，必须借助外部资源加载或构建阶段介入：
-
JavaScript 动态加载：用
fetch('nav.html')在每个页面运行时拉取外部 HTML 片段，再注入 DOM。适用于 GitHub Pages、Netlify 等静态托管环境，但需确保同源、路径正确、错误处理到位 -
Web Components（Custom Elements）：封装成
<site-nav></site-nav>这类自定义标签，把模板逻辑写在 JS 类里（如connectedCallback中fetch加载并渲染），所有页面引入同一份components.js即可复用 -
构建工具预处理：用 Webpack +
html-loader或 Vite +vite-plugin-html，在打包时把header.html内容直接插入到生成的每个 HTML 文件中。输出的是纯静态 HTML，无运行时依赖，适合 SEO 和 CDN 部署
data-* 属性配合模板工厂函数是轻量级折中方案
如果你不想引入构建流程，又希望避免重复写模板结构，可以结合 <template></template> 和 data-* 实现“逻辑复用”而非“结构复用”：
立即学习“前端免费学习笔记（深入）”；
- 在每个页面都放一份相同的
<template id="card"></template>（结构一致，不冗余） - 统一用一个外部 JS（如
templates.js）定义renderCard({ title, content })工厂函数 - 各页面通过
data-template="card"+data-title="xxx"声明意图，由工厂函数读取dataset并填充模板 - 这样结构仍需存在多份，但填充逻辑、事件绑定、样式规则全部集中，维护点只有一个
跨页面复用的本质是打破单页边界，要么靠运行时加载（JS fetch）、要么靠构建时合并（Webpack/Vite）、要么靠浏览器原生组件注册（Custom Elements）。指望 <template></template> 自己跨页面，就像指望一个 div 记住上个页面的 scrollTop —— 它没这个设计职责。
