toggle event throws error on details element

[Lenni009]

Description

When putting an @toggle event handler on a <details> element, the type checking fails with this error:

src/App.vue:6:13 - error TS2322: Type '() => void' is not assignable to type 'Event'.

<details @toggle="sayHi">

node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:444:5
onToggle?: Event;

The expected type comes from property 'onToggle' which is declared here on type 'DetailsHTMLAttributes & ReservedProps & Record<string, unknown>'

Expected Behaviour

Since toggle is a standard DOM event, I want to be able to hook up an event listener to that event.

It works in the 1.x versions of vue-tsc, and also works when Typescript isn't used.

Workaround

When using the old element.addEventListener('toggle', () => {}); syntax, there is no error.

Reproduction

Minimal reproduction: https://github.com/Lenni009/vue-details-toggle-event-issue

[johnsoncodehk]

It's type issue from @vue/runtime-dom, the type of onToggle should be (payload: MouseEvent) => void instead of MouseEvent.

@LinusBorg could you transfer this issue?