原生 template 元素更稳定，因其不渲染、不执行脚本、不发起请求，天然防 XSS；而 innerHTML += 字符串拼接易致 [object Object]、语法错误、DOM 重排及安全风险。
为什么原生 template 元素比字符串拼接更稳
直接用 innerHTML += `<div>${name}</div>` 看似快，但对象插进去变成 [object Object]、引号嵌套一错就报语法错误、每次拼接都触发 DOM 重排，还可能执行用户输入的 <script> 导致 XSS。而 document.createElement('template') 创建的节点不渲染、不执行脚本、不发起资源请求，天然隔离风险。
必须用 content.cloneNode(true) 复制内容——直接 appendChild(template.content) 会把原节点移走，第二次调用就空了；模板里不能写 <script> 或 <style>，它们不会生效，逻辑和样式得外置。
- 适合单次渲染几十条以内的结构，比如弹窗表单项、侧边栏菜单
- 模板内容应只含纯 HTML，所有交互行为抽成独立函数（如
handleClick()） - 避免在
DOMContentLoaded前操作，否则querySelector返回null
fetch() 加载外部 HTML 片段时白屏怎么兜底
用 fetch('/navbar.html').then(r => r.text()).then(html => el.innerHTML = html) 很干净，但网络失败、404 或 CORS 会直接让区域空白，且无 fallback。浏览器不报错，UI 就塌了。
必须加 .catch()，哪怕只塞一行占位：.catch(() => el.innerHTML = '<!-- navbar load failed -->')。同时注意：片段里带内联 <script> 不会自动执行，得显式调用初始化函数，比如 initNavbar()。
立即学习“前端免费学习笔记（深入）”；
- 路径必须可访问，
file://协议下 fetch 会被跨域拦截，需本地服务器（如 Live Server） - 不要在 DOM 加载完成前调用，否则目标元素还没挂载
- 若需传数据给加载后的逻辑，改用
data-id存 ID，再查表取对象，别往 HTML 里塞 JSON 字符串
Handlebars 编译失败报 TypeError: template is not a function 怎么定位
常见原因是模板没挂载或编译时机不对。比如 Handlebars.compile() 执行时，DOM 中还没插入 <script id="user-template" type="text/x-handlebars-template"> 节点。
先检查 document.getElementById('user-template') 是否为 null，再确认 script 标签是否在调用前已存在（放在 <body> 底部，或用 DOMContentLoaded 包裹）。如果用 Webpack/Vite，Handlebars 需显式 import，且模板不能写在 <script> 标签里（打包时会被忽略）。
- 简单替代：改用
lit-html的html标签函数，无需预编译，更轻量 - 调试时可在控制台手动运行
Handlebars.compile(document.querySelector('#tpl').innerHTML)验证编译逻辑 - 避免在模块作用域外提前执行编译，尤其当模板异步加载时
VS Code 中 HTML 片段（snippets）按 Tab 没反应怎么办
不是语法错，而是配置位置或作用域不对。代码片段默认只对当前语言生效，缩写名必须完全匹配，且必须用 Tab 触发（不是 Enter 或空格）。
确保在「HTML」语言专属片段中定义（不是 Global 或 JavaScript），检查 html.json 是否保存在正确路径（如 ~/.vscode/extensions//snippets/html.json 或用户片段目录），body 中换行和缩进要用 \n 和 \t 显式表示。
- 推荐优先用内置 Emmet：
!+ Tab 就能生成完整 HTML5 结构，比自定义片段更稳定 - 缩写如
boil输入后必须按 Tab，否则无效 - 片段生效前重启 VS Code 或重新加载窗口有时是必要步骤
真正卡住效率的，从来不是“会不会写 template”，而是数据字段名和模板变量不一致、fetch 不加 .catch()、重复 clone 或误用 appendChild 移走原节点——这三处松动，再好的模板也立刻退化成维护黑洞。
