嵌入shadowroot的Modal中初始化Materialize Autocomplete失效问题

问题根因 #

Materialize 的 Autocomplete 组件默认会将生成的下拉列表节点挂载到全局 document.body 上，没有适配 Shadow DOM 场景。同时 Modal 组件自带「限制所有交互仅在 Modal 内部生效」的逻辑，挂载到全局 document 下的下拉列表既无法被 Shadow Root 内部的输入框事件关联，也会因为处于 Modal 外部被拦截，最终触发空对象操作报错。

解决方案 #

1. 调整初始化时机+指定挂载节点（优先推荐） #

Modal 完全打开后再初始化 Autocomplete，同时通过 appendTarget 参数指定下拉列表挂载到 Shadow Root 内部的 Modal 容器中，而不是默认的全局 body：

// 1. 提前获取Shadow Root内的目标节点
const shadowRoot = 你自己的Shadow Root实例;
const goalInput = shadowRoot.getElementById('goalInput');
const targetModal = shadowRoot.querySelector('.modal'); // 替换为你实际的Modal容器选择器

// 2. 初始化Modal时，在打开完成的回调里初始化Autocomplete
const modalInstance = M.Modal.init(targetModal, {
  onOpenEnd: () => {
    const autocompleteInstance = M.Autocomplete.init(goalInput, {
      appendTarget: targetModal, // 关键配置：下拉挂载到Shadow Root内的Modal容器
      // 补充你自己的Autocomplete配置，例如下拉选项数据
      data: {
        "选项1": null,
        "选项2": "https://example.com/icon.png"
      }
    });
  }
});

2. 低版本兼容方案 #

如果你使用的 Materialize 版本较低没有提供 appendTarget 配置，可以在初始化后手动移动下拉节点的位置：

const autocompleteInstance = M.Autocomplete.init(goalInput);
// 把生成的下拉节点从全局body移到Shadow Root内的Modal里
targetModal.appendChild(autocompleteInstance.container);

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