如何通过DOM元素获取批量初始化的MDCMenu实例？

手动绑定实例的方案可行性 #

你代码中将MDCMenu实例挂载到对应DOM元素的实现思路是完全可行的，也是非框架场景下关联组件实例和DOM的常用做法。后续需要操作单个菜单时，只要先定位到目标DOM节点，读取挂载的属性即可拿到对应实例，示例代码如下：

// 定位目标菜单DOM
const targetMenuDom = document.querySelector('#my-menu');
// 读取已绑定的MDCMenu实例
const targetMenu = targetMenuDom.MDCMenu;
// 直接执行自定义操作，比如修改打开状态、调整锚点位置
targetMenu.open = false;

如果担心挂载的自定义属性和DOM原生属性冲突，可以给属性名加私有前缀，比如改成targetMenuDom.__customMDCInstance，降低兼容风险。

MDC原生内置的实例绑定逻辑 #

你不需要手动编写代码将实例挂载到DOM上——MDC本身在组件初始化流程中，就已经实现了和你手写逻辑完全一致的实例绑定：

• 所有MDC组件在构造时，都会自动把生成的组件实例引用，存储在对应的根DOM节点上
• 对MDCMenu组件来说，执行完new MDCMenu(menuEl)之后，menuEl节点上就已经自动关联了对应的MDCMenu实例，你代码里写的menuEl.MDCMenu = menu属于重复实现的冗余代码
• 这套绑定逻辑是MDC所有组件的通用能力，不管是菜单、按钮、输入框还是弹窗组件，初始化完成后都可以直接在对应的根DOM节点上读取到关联的组件实例，不需要开发者额外做绑定操作。

批量初始化的优化提示 #

• 目前你实现的点击切换菜单显隐的逻辑，可以直接调用MDC实例提供的setOpen方法完成状态切换，语义更清晰
• 后续如果需要批量清理所有初始化过的菜单实例，不需要单独维护实例存储列表，直接遍历所有带mdc-menu类的DOM元素，读取上面绑定的实例调用destroy()方法即可完成销毁。

内容的提问来源于stack exchange，提问作者cloudinstone