Class and slot properties errors in Vue 2.7 without @types/react dependency

[LurkingExorcist]

In order to solve this issue as fast as possible, I created a small repo to reproduce the problem: https://github.com/Hope410/slot-class-issue

1. Volar throws the error of class property doesn't exist in vue component defined by defineComponent function:
   Property 'class' does not exist on type 'IntrinsicAttributes & Readonly<Partial<{}> & Omit<{} & {}, never>>'.
   

I've tried to fix the error by providing a type of class property in IntrinsicAttributes interface in jsx.d.ts file, and the problem has gone, but seems like the solution must be provided by Volar itself.

declare namespace JSX {
  interface IntrinsicAttributes {
    class?: any;
  }
}

2. The next problem is about property 'slot':
   Property 'slot' does not exist on type 'ElementAttrs<HTMLAttributes>'.
   

I've tried to solve this as well as class-property problem, but it didn't help. VS Code shows that property exists in JSX.IntrinsicAttributes interface, but compiler still throws the same.

Extending HTMLAttributes interface in declaration of vue/types/jsx module in jsx.d.ts file didn't fix the error. But direct extension of HTMLAttributes interface in node_modules/vue/types/jsx.d.ts helped.

[NikhilVerma]

I have the same issue with data-* attributes.

<template>
   <div :data-selected="selected"></div>
</template>

Results in

Type '{ dataSelected: boolean; "data-selected": boolean; }' is not assignable to type 'ElementAttrs<HTMLAttributes>'.
  Property 'dataSelected' does not exist on type 'ElementAttrs<HTMLAttributes>'.ts(2322)

[NikhilVerma]

Here is my solution

shims.d.ts

declare module "vue/types/jsx" {
	export interface HTMLAttributes {
		[key: `data${any}`]: any;
		[key: `aria${any}`]: string;
	}
}

export {};