Support events without hyphens (?)

[nolanlawson]

It's come to my attention that the event names skin-tone-change and emoji-click may be problematic in some cases. It looks like some frameworks may not be able to use anything but lowercase, non-hyphenated event names, because that's what's supported in the DOM. E.g.:

<emoji-picker onemojiclick></emoji-picker>

but not

<emoji-picker onemoji-click></emoji-picker>

The second one looks like of bizarre anyway, so we should probably just support the non-hyphenated version, and maybe remove the hyphenated version in a major update later.

Note this would only apply to declarative usage not imperative usage. element.addEventListener() should work in all cases.

[nolanlawson]

Prior art:

• LWC uses only lowercase and underscores
• Stencil uses camelCase
• Justin Fagnani's chessboard element uses lowercase hyphenated events
• his "how to publish custom elements" article doesn't mention events at all
• LitElement and MDN don't have any guidelines about event names
• file-drop (google chrome labs) uses lowercase, no hyphens and also has onfiledrop
• darkmodetoggle (google chrome labs) uses lowercase, no hyphens

Seems LWC and Google both agree on lowercase, no hyphens at least.

[nolanlawson]

I suppose there's also the question of whether I should have picker.onemojiclick and picker.onskintonechange as properties.

[nolanlawson]

Looking back through custom elements everywhere, it appears there are actually no tested frameworks that support lowercase events but not lowercase-kebab events.

Also, apparently onsomeevent is not a thing? file-drop adds some TypeScript annotations for JSX, but I assume this is just for Preact since React doesn't support any declarative events on custom elements whatsoever.

So maybe it is not a big deal to implement this.