How to add IntrinsicElements in Vue3 with Typescript?

Question

I want to add a web component defination so that I can see the defination in vscode with volar. But I try a lot of ways and still not work. How can I do this?

import type { HTMLAttributes } from 'vue';

// not work
declare global {
    namespace JSX {
        interface IntrinsicElements {
            myelement: HTMLAttributes;
        }
    }
}

// add "export" not work
declare global {
    export namespace JSX {
        export interface IntrinsicElements {
            myelement: HTMLAttributes;
        }
    }
}

// without global not work
export namespace JSX {
    export interface IntrinsicElements {
        myelement: HTMLAttributes;
    }
}

if i use GlobalComponents, props is ok, but event still not work

declare module '@vue/runtime-core' {
    export interface GlobalComponents {
        myelement: HTMLAttributes;
    }
}

Answer 1

Example code maybe helpful

import { defineComponent, h } from 'vue'

type IntrinsicElements = {
  [elem: string]: any;
}

const MyComponent = defineComponent({
  setup() {
    return () => {
      return (
        <div>
          <h1>My Component</h1>
        </div>
      )
    }
  }
})