向@material/web的md-menu注入Lit时标签未闭合及菜单不显示求助

1. 先修复标签不匹配的根本问题 #

你的代码里存在标签闭合错误：<md-sub-menu-item>的闭合标签写成了</md-sub-menu>，这直接导致HTML解析异常，md-menu标签无法正常闭合。

修正后的模板代码：

<div style="position:relative;">
  <button
      class="anchor"
      ${ref(anchorRef)}
      @click=${() => this.menuRef.value.show()}>
    Click to open menu
  </button>
  <!--
    `has-overflow` is required when using a submenu which overflows the
    menu's contents
  -->
  <md-menu has-overflow ${ref(menuRef)}>
    <md-menu-item header="This is a header"></md-menu-item>
    <md-sub-menu-item header="this is a submenu item">
      <md-menu slot="submenu">
        <md-menu-item
          header="This is an item inside a submenu"></md-menu-item>
      </md-menu>
    </md-sub-menu-item> <!-- 这里修正为正确的闭合标签 -->
  </md-menu>
</div>

2. 正确绑定menu的anchor元素 #

Lit中不建议直接在模板中用函数表达式赋值元素属性，推荐通过生命周期钩子或ref回调来设置anchor：

方式一：使用ref回调同时赋值ref和anchor #

import { LitElement, html, ref, createRef } from 'lit';
import '@material/web/menu/menu.js';
import '@material/web/menu/menuitem.js';
import '@material/web/menu/submenuitem.js';
import '@material/web/menu/submenu.js';

class YourComponent extends LitElement {
  anchorRef = createRef();
  menuRef = createRef();

  render() {
    return html`
      <div style="position:relative;">
        <button
            class="anchor"
            ${ref(this.anchorRef)}
            @click=${() => this.menuRef.value?.show()}>
          Click to open menu
        </button>
        <md-menu has-overflow ${ref((el) => {
          this.menuRef.value = el;
          el.anchor = this.anchorRef.value;
        })}>
          <md-menu-item header="This is a header"></md-menu-item>
          <md-sub-menu-item header="this is a submenu item">
            <md-menu slot="submenu">
              <md-menu-item header="This is an item inside a submenu"></md-menu-item>
            </md-menu>
          </md-sub-menu-item>
        </md-menu>
      </div>
    `;
  }
}

方式二：在firstUpdated生命周期中设置 #

class YourComponent extends LitElement {
  anchorRef = createRef();
  menuRef = createRef();

  firstUpdated() {
    // 确保元素已渲染完成
    if (this.menuRef.value && this.anchorRef.value) {
      this.menuRef.value.anchor = this.anchorRef.value;
    }
  }

  render() {
    return html`
      <div style="position:relative;">
        <button
            class="anchor"
            ${ref(this.anchorRef)}
            @click=${() => this.menuRef.value?.show()}>
          Click to open menu
        </button>
        <md-menu has-overflow ${ref(this.menuRef)}>
          <md-menu-item header="This is a header"></md-menu-item>
          <md-sub-menu-item header="this is a submenu item">
            <md-menu slot="submenu">
              <md-menu-item header="This is an item inside a submenu"></md-menu-item>
            </md-menu>
          </md-sub-menu-item>
        </md-menu>
      </div>
    `;
  }
}

3. 额外注意事项 #

• 确保已正确导入所有所需的Material Web组件（menu、menuitem、submenuitem、submenu），否则组件无法正常注册渲染。
• 在调用show()方法时，加上可选链操作符?.，避免menuRef未赋值时出现报错。

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