When LWC invokes a function, is it possible for the function to access arbitrary attributes in the invoking element?

Question

Let's say my LWC has the following code:

<c-widget-tile widget={widget} onwidgetselect={openWidget}></c-widget-tile>

Assuming widget contains the data for an instance of Widget__c Is it possible for my openWidget function to get widget.Id out of the event parameter?

(I know I can make this work by including data-record-id={widget.Id} in the c-widget and then getting the value out of event.target.dataset.recordId, but I'd prefer to make the solution less redundant and more concise.)

Answer 1

Your widget-tile component can include the widget passed in to it:

@api widget;
dispatchWidgetSelectEvent() {
    this.dispatchEvent(
        new CustomEvent('widgetselect', { detail: { widget } })
    );
}

Given that code in the widget tile, you can then:

openWidget(event) {
    let widgetId = event.detail.widget.Id;
    // ... //
}

---

You can also access the widget via the API property for the component:

 openWidget(event) {
     let widgetId = event.target.widget.Id;
 }