仅存储结构，不执行逻辑；交互须克隆后手动绑定事件，用data属性标记节点，避免id重复；下拉状态需实例隔离，销毁时清理监听器。
用 <template></template> 声明结构，但别在 HTML 里直接写交互逻辑
<template></template> 只是“存结构”，不执行、不渲染、不绑定事件。你把它放在页面任意位置（比如 onclick 写在模板里的 <button></button> 上——那根本不会生效，因为克隆出来的节点还没挂到 DOM，更没监听器。
- 模板内只保留纯结构和占位符，比如用
data-role="menu-item"或data-index标记可交互节点 - 所有事件必须在克隆后、插入前，用
addEventListener()显式绑定 - 避免用
id做选择器：克隆多次后会重复，改用querySelector('[data-role="toggle"]')这类属性选择器
示例片段：
<template id="main-menu"><nav class="main-nav"><ul>
<li><a href="#" data-role="nav-link" data-href="/home">首页</a></li>
<li><a href="#" data-role="nav-link" data-href="/about">关于</a></li>
<li>
<button type="button" data-role="dropdown-toggle">产品</button>
<ul class="submenu" data-role="dropdown-menu"></ul>
</li>
</ul></nav></template>
克隆后必须手动绑定事件，且要区分委托与直绑
克隆出来的节点是“裸 DOM”，没有行为。你得自己决定：哪些事件用事件委托（比如整个菜单的点击分发），哪些必须直绑（比如下拉按钮的 toggle 状态）。- 对静态项（如首页、关于）可用委托：在
nav上监听click，再根据e.target.dataset.role === 'nav-link'分发 - 对动态控制项（如下拉开关）必须直绑：每个
data-role="dropdown-toggle"克隆后立刻调el.addEventListener('click', handler) - 别在
constructor或模板初始化时绑——此时节点还没挂载，querySelector返回null
关键点：委托省事但难控状态；直绑灵活但要注意清理（尤其组件销毁时需调 removeEventListener）。
下拉子菜单展开/收起必须隔离状态，避免全局冲突
多个下拉项共用同一份 JS 逻辑时，最容易出现“点开 A，B 也跟着展开”或“关掉所有却漏掉一个”。根源是状态没绑定到具体实例。- 每个下拉项应维护自己的
this._isOpen，而不是用全局变量或 class 名切换 - 展开前先遍历已开的其他下拉，调它们的
close()方法（如果你封装了该方法） - 关闭逻辑不能只靠点击外部：要监听
document的click，再判断e.target是否在当前菜单及其触发器之外
常见坑：event.stopPropagation() 写错位置——在子菜单内部点击时阻止冒泡是对的，但在触发器上阻止，会导致 document click 监听失效。
传参与数据驱动要用 dataset + 工厂函数，别硬塞 innerHTML
模板不是模板引擎，它不解析表达式。想让菜单内容动态，得靠 JS 注入，而不是写${title}。
- 工厂函数如
renderMainMenu({ items: [...], dropdowns: {...} })接收配置，再操作克隆后的 fragment - 用
el.setAttribute('data-id', item.id)和el.textContent = item.label安全填充，避免 XSS - 子菜单内容不要拼接字符串塞进
innerHTML，而是用document.createElement+appendChild构建，方便后续绑定事件
性能提醒：如果菜单项超过 20 条，考虑用 DocumentFragment 批量插入，而不是逐个 appendChild。
真实项目里最常被忽略的，是销毁阶段的状态清理和事件解绑——尤其是下拉菜单反复开关后，旧监听器还在内存里占着，既吃资源又干扰新逻辑。别等报错才想起加 disconnectedCallback 或手动 removeEventListener。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
