[React 19] Custom element event naming issue in React 19 with TypeScript

[wsuwt]

Summary

Hi React team,

First off, thank you for making custom elements fully compatible with React 19! It’s been a great experience writing less code while leveraging custom elements.

I came across an issue when using a custom element with events in a React TSX file (as shown in the picture below). TypeScript throws an error when the event name doesn’t contain a hyphen (-). However, based on the test cases here, it looks like event names should be valid as long as they follow the on- prefix.

Would love to hear your thoughts on this—happy to provide more details if needed!

Repository: https://github.com/wsuwt/react-v19-ts-custom-element

[eps1lon]

You should file this against @lit/react. This library provides the types for the props of foo-bar in your example.

[wsuwt]

Thanks @eps1lon but the library uses React types under the hood.

type ElementProps<I> = Partial<Omit<I, keyof HTMLElement>>;
export type WebComponentProps<I extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<I>, I> & ElementProps<I>;

[eps1lon]

Something is declaring the onfoobar-click prop but not onfoobarclick. That declaration must happen outside of @types/react

[wsuwt]

I was thinking the same—when a hyphen is involved, type checking doesn’t seem to apply. Considering this issue further, I believe the errors are expected, and it’s up to the library developer to define custom event type declarations. Thank you for your help.