<template> 标签定义可复用结构，但需手动克隆才能生效；其内容被解析却不挂载、不执行脚本、不加载资源，仅作为浏览器的“待命区”。
用 <template> 标签定义可复用结构，但必须手动克隆才能生效
原生 <template> 不会自动渲染，它只是浏览器的“待命区”——内容被解析但不挂载、不执行脚本、不加载资源。直接写 <template><header>.../template> 页面上什么都不会出现。
常见错误是以为加了 id 就能直接用：document.getElementById('tmpl-header') 拿到的是 <template> 元素本身，不是它的内容；必须取 .content 并调用 .cloneNode(true) 才能得到可插入的 DOM 片段。
- 模板内不能有
<script>或<style>标签——它们会被忽略，得靠 JS 动态注入或用adoptedStyleSheets -
<slot>可以预留内容插槽，但只在 Shadow DOM 中生效；若用在 light DOM（比如直接 append 到 body），<slot>会被当作普通标签显示为文字 - 多个组件共用同一模板时，别重复查询
document.getElementById()，缓存template.content更安全
配合 Custom Elements 实现真正解耦：HTML 结构 + JS 行为 + CSS 样式三者隔离
单独用 <template> 只解决了结构复用，没解决作用域和样式污染问题。把模板和自定义标签绑定，才是模块化解耦的关键一步。
例如注册一个 <nav-bar> 组件，必须满足：名称含短横线（nav-bar）、继承 HTMLElement、在 constructor 或 connectedCallback 中 attach Shadow DOM 并注入模板内容。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Shadow DOM 默认
mode="closed"，外部 CSS 无法穿透；若需复用全局样式，显式设mode="open" - 组件内事件监听必须用
this.shadowRoot.addEventListener()，用document.addEventListener()会漏掉 Shadow 内部事件 - 不要在
connectedCallback里无条件fetch()模板——Custom Element 可能被反复创建/销毁，导致重复请求；建议提前加载并缓存
避免用 innerHTML 注入动态 HTML，改用 insertAdjacentHTML()
当组件只需静态结构（如页脚、侧边栏），且不想走 Custom Elements 流程时，fetch() 加载 HTML 字符串是轻量选择。但直接赋值给 innerHTML 有风险：它会解析并执行内联 <script>，违反 CSP 策略，也可能触发 XSS。
- 永远用
element.insertAdjacentHTML('beforeend', html)替代element.innerHTML = html - URL 路径以入口 HTML 所在目录为基准，不是当前 JS 文件位置；要用
new URL('./footer.html', import.meta.url)构造绝对路径 - 开发环境容易因缓存拿到旧版本 HTML，加
cache: 'force-cache'或拼时间戳参数（如?t=${Date.now()}）
构建时预处理 vs 运行时加载：选错时机，模块化就变成维护负担
模块化不是“越运行时越高级”。有些组件（如全局 header、copyright）内容稳定、无需传参、不依赖用户状态，硬套 fetch() 或 Custom Elements 反而增加首屏延迟和错误路径。
- 构建时内联（如
rollup-plugin-html）输出纯 HTML，兼容性好、无运行时依赖、路径解析明确 - 但不支持传参，所以带变量的组件（如
<card title="xxx">）必须升级为 Custom Element 或引入模板引擎 - 真正容易被忽略的是资源生命周期：Custom Element 被移除时，若没在
disconnectedCallback里清理定时器、IntersectionObserver或事件监听器，内存泄漏比 jQuery 时代更隐蔽
