HTML模板在构建复杂组件布局时必须使用，因其能避免重复编码引发的维护隐患；通过抽离公共结构（如header、nav）为可复用片段，结合Grid布局约束与template元素克隆机制，实现结构扁平化与高效渲染。
HTML模板在构建复杂组件布局时，不是“能用”，而是“必须用”——尤其当多个页面共享导航、侧边栏、表单结构或卡片网格时，硬编码重复区块会立刻失控。
为什么不能直接写死 <header> 和 <aside>？
手写每个页面的相同结构，表面看只是复制粘贴，实际埋了三类隐患：一是修改一处（比如更新版权年份），就得改十几份 HTML；二是某次漏改导致视觉不一致，用户一眼就能察觉；三是新成员接手时，无法快速判断哪些是公共逻辑、哪些是页面特有内容。
- 模板把公共结构抽离成可复用片段，
header.html或nav.mustache只维护一份 - 动态模板（如用
handlebars或Eleventy）支持传参，比如{{#if isDashboard}}...{{/if}}控制侧边栏显隐 - 静态模板（如纯 HTML +
<include>配合构建工具）也能通过html-loader或posthtml-include实现嵌入，避免运行时开销
template 元素和 importNode 在组件化中怎么用？
原生 <template> 不会被渲染，适合存组件骨架；配合 document.importNode() 可安全克隆多次。但注意：它不自动解析内联脚本，也不执行 <script> 标签里的代码。
- 写法示例：
<template id="card-template"><div class="card"><h3>{{title}}</h3><p>{{content}}</p></div></template> - 克隆后需手动填充数据，比如用
innerHTML替换{{title}}，或用querySelectorAll批量设textContent - 若组件含交互逻辑（如按钮点击事件），必须在克隆后重新绑定，不能依赖模板内部的
onclick属性
Grid 布局和模板如何配合控制复杂区域？
Grid 本身不关心内容来源，但它对模板输出的 DOM 结构有强约束。比如一个仪表盘要 3 列卡片自适应排列，grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 能起作用的前提是：所有卡片元素必须是同一父容器的直系子节点。
立即学习“前端免费学习笔记（深入）”；
- 模板生成的 HTML 必须保证结构扁平——不能让某个卡片被额外包了一层
<div class="wrapper">再塞进 grid 容器 - 如果使用服务端模板（如
Nunjucks），可在循环中直接输出<article class="dashboard-card">，避免嵌套层级污染 grid 流 - 客户端 JS 渲染时，务必用
fragment.appendChild(cardEl)批量插入，而不是逐个appendChild，否则触发多次重排
真正难的不是选模板引擎，而是决定哪些该抽成模板、哪些该留作内联逻辑——比如一个带搜索过滤的表格组件，表头和分页器适合模板化，但筛选状态和 API 请求逻辑必须由 JS 管控，混在一起反而更难调试。
