Generic & Falltrough Attributes: Object literal may only specify known properties...

[JosepBergay]

Vue version

3.3.4

Description

If the component is generic vue-tsc complains when an html attribute is bound to it.

What is expected?

I expect to bind any html attribute to a component without errors.

What is actually happening?

Volar and vue-tsc show an error on the first attribute, thinking that it's a prop and it needs to be defined on the child component.

REPRO

1. Open: stackblitz

2. Run: npx vue-tsc

3. Full Error:

src/App.vue:11:25 - error TS2345: Argument of type '{ val: any; id: string; }' is not assignable to parameter of type '{ val: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.
  Object literal may only specify known properties, and 'id' does not exist in type '{ val: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.

11   <Generic :val="value" id="id" />
                           ~~


Found 1 error in src/App.vue:11

Probably related issues:

#3201

[laterdayi]

#3301

[so1ve]

This issue will be fixed by #3487, which makes strictTemplates: false work with generic components. If you enable that option, #3443 will occur - but they are different issues.