bug: Missing "beforetoggle" and "toggle" events on HTMLElement

[nborelli]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.21.0

Current Behavior

I cannot add an event handler for the beforetoggle or toggle events of any HTMLElement because they do not seem to be defined. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event. I know the Popover API is relatively new in the DOM, but it is well supported at this point https://caniuse.com/mdn-api_htmlelement_popover.

I get the error:

ts: Type '{ id: string; class: string; popover: string; ref: (el: HTMLElement) => void; onBeforeToggle: (e: ToggleEvent) => void; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'onBeforeToggle' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

Expected Behavior

The beforetoggle and toggle events should be defined.

System Info

System: node 22.7.0
    Platform: darwin (23.6.0)
   CPU Model: Apple M3 Max (16 cpus)
    Compiler: /Users/neal.borelli/Code/play/Stencil/popover-poc/node_modules/@stencil/core/compiler/stencil.js
       Build: 1724698030
     Stencil: 4.21.0 🐷
  TypeScript: 5.5.3
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

A render() function like this will not work:

  render() {
    return (
      <Host>
        <button popoverTarget="mypopover">Toggle Popover</button>
        <div id="mypopover" popover="auto" onBeforeToggle={this.handleBeforeToggle}>
          <slot />
        </div>
      </Host>
    );
  }

I get the error:

ts: Type '{ id: string; class: string; popover: string; ref: (el: HTMLElement) => void; onBeforeToggle: (e: ToggleEvent) => void; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Property 'onBeforeToggle' does not exist on type 'HTMLAttributes<HTMLDivElement>'.

Code Reproduction URL

https://github.com/nborelli/popover-pop-bug

Additional Information

Can work around by using a ref to get the reference to the element and then use addEventListener()