Where is this LWC attribute defined?

Question

An org I'm working in has an existing custom LWC component that functions as a dynamic look up. You can define which object it looks up to but in this instance it is working with Accounts. When clicking on one of those outputted records, that record is added to the 'filterAccounts' attribute on the parent component. The 'filterAccounts' attribute is bound to a lightning:pillbox's items attribute and the pillbox displays the record in the pillbox.

I want to copy this pattern in a different context, reusing the LWC component and changing the target object to contacts. I'm having trouble because the attribute on the LWC component that defines the event handler in the example usage is called 'onaccountfilter' and I can not find any attribute defined javascript with the same name. I have searched for parts of the name like 'on' and 'filter' in the js file but still no luck. Similarly, this is not a kebab-case attribute name which leads me to believe that it's being defined somewhere else.

Where could it be? How can I track down where this attribute is defined so I can create the same on my new implementation of this component?

Answer 1

It's the event, not a property. If you have access to the source code of the component it must have something like

this.dispatchEvent(new CustomEvent('accountfilter'));

Sometimes the event has details.

new CustomEvent('accountfilter', { detail: somedata });

Don’t prefix your event name with the string on, because inline event handler names must start with the string on. If your event is called onmessage, the markup would be <c-my-component ononmessage={handleMessage}>. Notice the doubled word onon, which is confusing.

You can find more details on how the events work in LWC.