原生 <template> 是最轻量可控的组件开发起点，需配合 cloneNode(true) 和外置逻辑；避免 innerHTML += 引发 XSS、引号错乱和重排重绘；模板内禁用 <script> <style>，数据传原始类型，template.content 需克隆使用；外部 HTML 加载须加 .catch() fallback；DOM 操作须等 DOMContentLoaded 或 readyState；核心在于数据可靠、错误兜底、更新时机对齐。
原生 <template> 是提升组件开发体验最轻量、最可控的起点——它不依赖构建工具、不引入运行时、不污染全局作用域，但必须配合 cloneNode(true) 和外置逻辑，否则极易掉坑。
为什么直接 innerHTML += 拼接模板会出问题
字符串拼接看似快，实则埋了三颗雷：innerHTML 会触发 XSS（尤其插用户输入）、引号嵌套错乱（如 "<div data-id="${id}"></div>" 中 id 含双引号就崩）、频繁重排重绘（每次 += 都触发 layout）。
- 用
document.createElement('template')替代字符串，模板内容不渲染、不执行脚本、不请求资源，纯结构容器 - 模板内禁止写
<script>或<style>—— 它们不会生效；样式抽到 CSS 文件，行为抽成独立函数 - 数据只传原始类型：
item.name、item.price?.toFixed(2)；对象用data-id存 ID，再查表取值
template.content 被清空？你漏了 cloneNode(true)
template.content 是一个 DocumentFragment，直接 appendChild(template.content) 会把节点“搬走”，第二次调用就空了——这是最常被忽略的 DOM 坑。
- 必须用
template.content.cloneNode(true)复制一份，再插入目标容器 - 如果只是单次渲染（比如弹窗表单项、菜单列表），
cloneNode(true)开销极小，无需优化 - 高频更新场景（如每秒刷新的监控面板），建议缓存克隆后的 fragment，避免重复 clone
外部 HTML 片段加载失败怎么办
用 fetch() 加载 navbar.html 类文件时，404 或网络中断会导致区域空白，且无 fallback 提示。
立即学习“前端免费学习笔记（深入）”；
- 务必加
.catch()：哪怕只写el.innerHTML = '<div class="error">加载失败</div>' - 不要在
DOMContentLoaded前操作：此时querySelector返回null，应包裹在事件监听或document.readyState === 'interactive'判断中 - 片段含初始化逻辑？别往 HTML 里塞
<script>，改用加载完后显式调用函数，例如initNavbar(el)
真正卡住体验的，从来不是“怎么写模板”，而是数据来源是否可靠、错误是否兜底、更新时机是否对齐——这三个点没控住，再漂亮的模板也只是空中楼阁。
