Lit-html中paper-dropdown-menu的iron-select事件监听问题排查

Great question! Let's clear this up for you:

First, you're correct that iron-select is the right event to listen for when an item in a Paper Elements list is selected—your GitHub docs reference is spot-on. The problem here is which element you're attaching the listener to.

The Root Issue #

The iron-select event is emitted by the <paper-listbox> component, not the outer <paper-dropdown-menu> wrapper. Your current code is listening to the dropdown container, which never fires that event.

Fix 1: Use Lit's Native Event Binding (Recommended) #

In Lit components, it's cleaner and more maintainable to bind events directly in your template instead of using addEventListener in firstUpdated. Here's how to adjust your code:

Update your render() template:

<paper-dropdown-menu label="Change position" id="changePositionDropdown">
  <paper-listbox 
    slot="dropdown-content" 
    class="dropdown-content" 
    selected="${this.positionForVideoInPlaylist - 1}"
    @iron-select=${this.handlePositionSelect}
  >
    <paper-item value="1">1</paper-item>
    <paper-item value="2">2</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Add the handler method to your component:

handlePositionSelect(e) {
  // Access the selected item's value easily
  const selectedPosition = e.detail.selectedItem.value;
  console.log("Selected position:", selectedPosition);
  // Add your position update logic here
}

Fix 2: Target the Correct Element in firstUpdated() #

If you prefer using addEventListener, you need to select the <paper-listbox> instead of the dropdown menu. Also, since Lit components use Shadow DOM, avoid document.getElementById (it won't find elements inside the component's shadow tree) and use this.shadowRoot.querySelector instead:

firstUpdated() {
  const positionListbox = this.shadowRoot.querySelector('#changePositionDropdown .dropdown-content');
  positionListbox.addEventListener('iron-select', (e) => {
    console.log("Hello there");
    const selectedValue = e.detail.selectedItem.value;
    // Handle the selection change
  });
}

Why This Works #

• <paper-dropdown-menu> is just a visual wrapper that toggles the visibility of the listbox. All selection logic and related events are handled by the <paper-listbox> inside it.
• Using Lit's template event binding ensures proper cleanup when the component is disconnected, preventing memory leaks—something manual addEventListener calls won't do unless you explicitly remove them.

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