How to pass additional data to lightning-button-menu onselect handler?

Question

Is there any way to pass additional data to a button-menu onselect hander?

I have a lightning-button-menu in a loop (this is a minimal example, and not a real-world case). When a menu item is selected, then handleActionsMenuSelect is called with a single event argument. The event.detail.value is set to the value of the menu item selected, in this case either edit or delete.

But since the menu is in a loop, I also need to determine which item to edit or delete. I tried putting item.id in the menu's value, but that does not appear in the event data.

Is there any way i can also pass the associated item.id to handleActionsMenuSelect?

            <template for:each={items} for:item="item">
              <lightning-button-menu label="Actions" value={item.id} onselect={handleActionsMenuSelect}>
                <lightning-menu-item label="Edit" value="edit"></lightning-menu-item>
                <lightning-menu-item label="Delete" value="delete"></lightning-menu-item>
              </lightning-button-menu>
            </template>

Answer 1

You could leverage data-* attribute: define an HTML attribute whose name must start with data- and can contain only letters, numbers, dashes, periods, colons, and underscores, i.e. data-id={item.id}.
In Javascript event.currentTarget.dataset will hold every property defined in HTML, in order to get the name of the property just remove the data- prefix and remove the dashes keeping in mind that you have to capitalize the next letter every time you remove a dash. I.E. The HTML attribute data-very-long-name="something" will become dataset.veryLongName.
So you'll find the id in event.currentTarget.dataset.id.

<template for:each={items} for:item="item">
  <lightning-button-menu label="Actions" data-id={item.id} onselect={handleActionsMenuSelect}>
    <lightning-menu-item label="Edit" value="edit"></lightning-menu-item>
    <lightning-menu-item label="Delete" value="delete"></lightning-menu-item>
  </lightning-button-menu>
</template>

handleActionsMenuSelect(event) {
    const recordId = event.currentTarget.dataset.id;
    console.log('recordId:', recordId);
}