Syntax to bind events in JSX is confusing with snake-case

[catwell]

I wanted to bind an event from an external component library that uses snake-case. The event is called selected-index-changed. I tried this:

<elix-list-combo-box onSelectedIndexChanged={...}>

... but it turns out that doesn't work and the correct syntax is the weird-looking:

<elix-list-combo-box onSelected-index-changed={...}>

Is there any way to make this look better? I can see three options:

• Make the first thing I attempted work.
• Make on-selected-index-changed work.
• Use a different syntax that uses the name of the event unchanged, e.g. what Angular does:

<elix-list-combo-box (selected-index-changed)={...}>