Function Refs Do Not Accept the Proper Parameter Types for HTMLElements

[ITenthusiasm]

Vue version

3.5.22

Link to minimal reproduction

https://github.com/ITenthusiasm/vue-issue-function-refs

Steps to reproduce

1. In the markup portion of an SFC, render an HTMLElement (e.g., <form>).
2. Pass a Function Ref to the element, using any function whose parameter matches the type of the element (e.g., HTMLFormElement).
3. Run the TypeScript type checker.

What is expected?

In TypeScript, I would expect the parameter of the Function Ref to accept any type that is compatible with the element. For example, the following should not cause any TypeScript errors.

<template>
  <form :ref="(el: HTMLFormElement | null) => { /* ... */ }">
    <!-- ... -->
  </form>
</template>

What is actually happening?

TypeScript throws an error when typing the el argument to match the owning element. (In the example case, HTMLFormElement and even HTMLElement are rejected.)

It seems that for some reason, the parameter of the Function Ref is typed to Element | ComponentPublicInstance | null. But Element is too generic to accept the exact type of a given HTMLElement.

System Info

Omitted. (Can add if needed.)

Any additional comments?

I encountered this bug while testing my Form Observer project/package in Vue. The library works fine. But I wrote the Vue TS types to enforce that the form validation observer's auto setup feature could only be used with <form>s. (This helps point users in the right direction.) Although this approach works in other frameworks (React, Solid, Svelte, etc.), Vue complains because of the TypeScript types. I'm assuming this is a bug since the behavior is a bit unintuitive.