Eventlistener for paper-dropdown-menu in Lit-html

Question

I'm in a lit-html project and using some of the material design elements from Google. paper-xxx.

I'm struggling to get an event fired from the paper-dropdown-menu. I have implemented it like below:

In render()

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

firstUpdated()

const changePositionDropdown = document.getElementById("changePositionDropdown");
    changePositionDropdown.addEventListener('iron-select', (e)=>{
        console.log("Hello there");
    });

I'm not entirely sure if iron-select would be the correct event to listen to, but seems like it according to this:

Applications can listen for the iron-select and iron-deselect events to react when options are selected and deselected Source: github line: 63

Would it be correct to use iron-select for listening when the selected item changes? And what am I doing wrong?

Answer 1

This is embarassing, forgot about the shadowroot.

This works

firstUpdated(){
 const changePositionDropdown = this.shadowRoot.querySelector('#changePositionDropdown');

    changePositionDropdown.addEventListener('iron-select', (e)=>{
        console.log("Hello there");
    });
}

It's also possible to use the @event: handle-fired-event

<paper-dropdown-menu 
    label="Endre rekkefølge"
    id="changePositionDropdown"
    @iron-select="${(e)=>{console.log("surprise")}}"> <!-- using the @ to handle the vent-->
    <paper-listbox 
        slot="dropdown-content" 
        class="dropdown-content" 
        selected="${this.positionForVideoInPlaylist-1}">
        <paper-item>1</paper-item>
    </paper-listbox>
</paper-dropdown-menu>