Lit模板中vaadin-dropdown内vaadin-item的@click事件不触发如何解决？

• <vaadin-dropdown-menu> 内部的 <template> 属于动态惰性渲染模板，模板内直接声明的 @click 事件不会自动绑定到最终渲染生成的真实 DOM 元素上，导致监听失效。
• Vaadin 组件会对下拉浮层内部的点击事件做内置拦截处理，避免不必要的事件冒泡干扰上层组件逻辑，就算事件绑定成功也大概率会被拦截，无法触发自定义回调。

Vaadin 组件体系设计了标准的选中值监听逻辑，不需要单独给每个 <vaadin-item> 绑定点击事件，只需给每个选项配置 value 属性，监听 <vaadin-dropdown-menu> 的 value-changed 事件即可拿到选中值，实现代码如下：

<vaadin-dropdown-menu label="Page Size" @value-changed="${event => this.setLimit(Number(event.target.value))}">
  <template>
    <vaadin-list-box>
      <vaadin-item value="10">10</vaadin-item>
      <vaadin-item value="25">25</vaadin-item>
      <vaadin-item value="50">50</vaadin-item>
      <vaadin-item value="100">100</vaadin-item>
   </vaadin-list-box>
 </template>
</vaadin-dropdown-menu>

该用法完全符合 Vaadin 组件的设计规范，兼容性和稳定性更强，也能适配 Vaadin 统一的主题交互逻辑。

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