Missing popover html attributes

[jonahShaf]

The popover API adds 3 new attributes to some/all elements that are not present in the TS DOM types yet:

1. popover
2. popovertarget - exposed in JS as popoverTargetElement
3. popovertargetaction - exposed in JS as popoverTargetAction

[thescientist13]

@jonahShaf
I am seeing this issue as well, in particular with popovertarget and popovertargetaction. Did you ever find a resolution to this?

[jonahShaf]

What I found is that this isn't a TS library issue, but in fact a React issue. React 18 did not have the popover attributes available, but, at least on the version of TS we were on at the time, the TS DOM library did. We're on React 19 now, which fixes this, but before then we worked around it by extending the React typings like so (note we took advantage of the fact that react will pass unrecognized attributes as is to the DOM, thus why we are not using the cameCase JS names):

declare module "react"
{
	interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T>
	{
		// extends React's HTMLAttributes
		popovertarget?: string;
		popover?: "manual" | "auto"
	}
}

[thescientist13]

Ah, thanks for sharing!

Yeah, I'm maintaining a custom JSX.IntrinsicElements implementation for my own library, and had assumed it would come from TypeScript's own DOM lib. My current workaround looks similar to yours, by enumerating over all the HTML elements and their attributes

// to support `style` attributes, we override `CSSStyleDeclaration` with `string`
type IsCSSStyleDeclaration<T> = T extends CSSStyleDeclaration ? string : T;

// creates a utility type to extract the attributes from any given element's DOM interface from `HTMLElementTagNameMap`
type ElementAttributes<E extends HTMLElement> = {
  // Extract all properties from the element, including inherited ones
  [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration<E[A]>;
} & {
  class?: string;
};

// map each HTML tag to a its attributes
type IntrinsicElementsFromDom = {
  [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]>;
};

// declare the global JSX namespace with the generated intrinsic elements.
declare namespace JSX {
  interface IntrinsicElements extends IntrinsicElementsFromDom {}
}

I'm testing with TypeScript 5.9.3 so maybe something is off with my implementation then. I had to do the same thing for class (not className) 🤔

Thanks again for the sharing, very helpful and gives some things to look into further.