Using web components in TSX

[digital pagoda]

Hey 👋

The UI project I've been working on has been using StencilJS v2 and TypeScript v4.5

Recently I upgraded to StencilJS v3 and TypeScript v5

In our web app's React TSX components, some folks have been using the custom elements rather than the React wrapped components.

e.g.,

return (
<my-button>example</my-button>

instead of

return (
<MyButton>example</MyButton>

Now in our web app, I'm seeing TypeScript errors like:

Property 'my-button' does not exist on type 'JSX.IntrinsicElements'

Anyone know how to fix this or what I'm doing wrong?

I thought generateTypeDeclarations might solve this, but it doesn't seem to be the case.

[hollow oar]

Your library would need to distribute a type declaration file that extends the JSX namespace.

Here's an example of a recommendation I provided for Swiper.js, for using their custom elements in React: https://github.com/nolimits4web/swiper/issues/6466#issuecomment-1478486837

You could generate this through an output target.