HTML模板本身不模块化，真正起作用的是组织方式、挂载逻辑和隔离边界；直接复制<template>标签无法实现样式隔离、脚本执行和状态保留，必须通过document.importNode克隆并挂载到closed Shadow DOM中才能实现真正模块化。
HTML 模板本身不模块化，强行“复用”只会让 10 个页面越改越乱；真正起作用的是组织方式、挂载逻辑和隔离边界。
为什么直接复制 <template> 标签根本不算模块化
很多人把一段导航 HTML 包进 <template id="nav"> 就以为完成了模块化。实际运行时：<template> 只是浏览器跳过解析的静态容器，既不执行脚本、也不加载资源、更不隔离样式。你用 innerHTML = tmpl.innerHTML 插进去，所有 class、<style>、<script> 全部落到主文档的 light DOM 里——主应用的 .header { padding: 2rem } 照样穿透生效，document.getElementById('modal') 会因重复 id 返回错误节点。
常见错误现象：
- 子页面插入同一份
<template>后，表单控件状态丢失（<input checked>变未选中） - 模板里写
<script>console.log('init')</script>，克隆后完全不执行 - 多个页面共用
id="footer"，JS 查询或 CSS 定位全部错乱
document.importNode() 是唯一安全的克隆方式
想保留原生行为（比如 <select> 的当前选项、<textarea> 的输入值），必须从 tmpl.content 克隆，而不是读取 tmpl.innerHTML。后者本质是字符串拼接，会丢掉 DOM 节点的运行时状态。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 用
const fragment = document.importNode(tmpl.content, true)，第二个参数true表示深克隆 - 禁止用
cloneNode(true)：它无法保留表单控件的 checked/disabled/selected 状态 - 挂载时用
container.appendChild(fragment)，禁用innerHTML +=——否则已绑定的事件监听器会被销毁 - 模板内所有
id必须替换为data-id或动态生成唯一值（如data-id="nav-${Date.now()}"）
真正隔离靠的是 attachShadow({ mode: 'closed' })，不是 <template>
<template> 本身没有作用域。想切断样式穿透、防止 DOM 查询污染，必须把它克隆后的 fragment 挂进 closed Shadow DOM。否则哪怕加了 data-app="user"，主应用的 [data-app="user"] .btn 还是能覆盖子模块的按钮样式。
关键步骤缺一不可：
- 在自定义元素构造函数中调用
this.attachShadow({ mode: 'closed' })——这是建墙的第一步 - 克隆后用
this.shadowRoot.appendChild(fragment)挂载，不是this.appendChild - Shadow DOM 内部不能再依赖全局 CSS 类名（如
.btn），需内联或<style>封装 - 如果要用 Bootstrap 工具类，得把对应 CSS 提取为
<style>块注入 shadowRoot，不能靠外部 link
多页面项目里，模板只是起点，工程结构才是核心
毕业设计做 10 个页面，最危险的不是不会写轮播图，而是把 <header> 复制 10 份。Bootstrap 的栅格失效、响应式错位、路径 404，根源都是缺乏统一入口和相对路径管理。
可行做法：
- 用一个
base.html模板，通过服务器端（如 Flask 的render_template_string）或构建时（如html-webpack-plugin + EJS）注入内容 - 所有静态资源路径统一用
<base href="/project/">，避免../css/style.css在子目录下失效 - 导航高亮不用手动改 10 个文件，用
data-current-page="about"+ 一行 JS 切换 active 类 - 语义化结构必须强制落地：
<main>包正文、<aside>包侧边栏、图片必带alt，否则屏幕阅读器一开就暴露问题
复杂点不在语法，而在每次插入模板前，是否记得检查 shadowRoot 是否存在、是否清空了旧 fragment、是否重置了表单状态——这些细节不写进 checklist，上线前必出问题。
