I have a Stencil generated web component library, we’re not using the React wrapper, but it outputs the d.ts files for all our components. These outline what can be on them ie <avatart name="s">, defining the intrinsic elements in our global.d.ts, I can make that type happy, hurray

declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            "avatar": Avatar
        }
    }
}

However, then React is mad when you go to use ref or key, so somewhere I found

React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,

But that doesn’t play well with ref, and now I’ve lost type checking for Avatar’s types.

I swear there as to be a syntax to tell JSX to combine these two types, help?

Everywhere I have found, resorts to using :any when working with web components, but there has to be a better way!