Is it best practice to name all event handlers in lowercase?

[coryvirok]

I've been Svelte-ing for a while now and I just ran across something in Svelte 5 that took me a while to debug.

All DOM event handlers are case sensitive in Svelte 5

This is fine for most scenarios where you have a simple onclick={...} but when you're passing lots of props to components that need to be added to elements using spread props, this gets incredibly messy an error prone. Which leads me to the question - should we be naming all event handlers with lowercase?

I like to name event handlers using camelCase, especially for components. E.g. "onUserLoggedIn". However I pass a lot of props using spread props in order to make it easy to customize components later on. This means I'm likely passing event handlers down multiple levels of components which leads to needing to write cursed code such as:

E.g.

<script lang="ts">
    import type { HTMLAttributes } from 'svelte/element'

    interface Props extends HTMLAttributes<HTMLDivElement> {
        username: string
    }

    const { username, ...restProps }: Props = $props()

    // somewhere in a utils.ts file:
    function lowercaseEventHandlerKeys<T extends Record<string, unknown>>(props: T): T {
      return Object.fromEntries(
        Object.entries(props).map(([key, val]) => [key.startsWith('on') ? key.toLowerCase() : key, val])
      ) as T
    }
</script>

<div {...lowercaseEventHandlerKeys(restProps)}>{username}</div>

I'd really prefer to continue using camelCase for my event handlers, but it's starting to seem like the best practice is to use all lowercase. What do others think?

Alternatively, I could stop passing spread props for all event handlers I know I care about, but this is a real productivity killer.

E.g.

<!-- Component.svelte -->
<script>
    const { onPointerDown, onPointerMove, onPointerUp, onSomethingElse, ...restProps } = $props()

    $effect(() => {
        // ...
        onSomethingElse()
    })
</script>
<rect
    {...restProps}
    onpointerdown={onPointerDown}
    onpointermove={onPointerMove}
    onpointerup={onPointerUp}
    />

[Ocean-OS]

You can make use of fallbacks in destructuring props to achieve something similar to this.

[coryvirok]

Interesting idea. Thanks!

[webJose]

My suggestion is to always use camel casing for custom events (callbacks) to intentionally avoid collisions with HTML events, which all seem to be in lowercase.