From 8792c2e65728d02c82acd1659cfa3e7ebfbcd9d0 Mon Sep 17 00:00:00 2001
From: Louis Shawn <louis.shawn@qq.com>
Date: Thu, 5 Feb 2026 11:23:28 +0800
Subject: [PATCH] fix(jsx): limit popovertarget attrs to button/input

---
 src/jsx.d.ts                  | 10 ++++++++--
 test/cases/tsx/src/header.tsx | 11 ++++++++---
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/jsx.d.ts b/src/jsx.d.ts
index 6897f149..4c9286bb 100644
--- a/src/jsx.d.ts
+++ b/src/jsx.d.ts
@@ -7,17 +7,23 @@ type ElementAttributes<E extends HTMLElement> = {
   [A in keyof E]?: E[A] extends (...args: any) => any ? any : IsCSSStyleDeclaration<E[A]>;
 } & {
   class?: string;
+};
+
+type PopoverTargetAction = 'show' | 'hide' | 'toggle';
+type PopoverTargetAttributes = {
   // have to manage this manually, can't seem to get this from TypeScript itself (not sure if just skill issue? :D)
   // https://github.com/microsoft/TypeScript-DOM-lib-generator/issues/1790
   // it should be there per https://github.com/mdn/browser-compat-data/pull/21875
   // https://github.com/ProjectEvergreen/wcc/issues/236
+  // per the spec, this should only apply to <button> and <input> elements.
   popovertarget?: string;
-  popovertargetaction?: 'show' | 'hide' | 'toggle';
+  popovertargetaction?: PopoverTargetAction;
 };
 
 // map each HTML tag to its attributes
 type IntrinsicElementsFromDom = {
-  [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]>;
+  [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]> &
+    (E extends 'button' | 'input' ? PopoverTargetAttributes : {});
 };
 
 declare namespace JSX {
diff --git a/test/cases/tsx/src/header.tsx b/test/cases/tsx/src/header.tsx
index 288d2201..4149a5a4 100644
--- a/test/cases/tsx/src/header.tsx
+++ b/test/cases/tsx/src/header.tsx
@@ -2,9 +2,14 @@
 export default class Header extends HTMLElement {
   render() {
     return (
-      <button popovertarget="mobile-menu" popovertargetaction="hide">
-        Close
-      </button>
+      <header>
+        <button popovertarget="mobile-menu" popovertargetaction="hide">
+          Close
+        </button>
+
+        {/* @ts-expect-error popovertarget should only be valid on <button> and <input> */}
+        <span popovertarget="mobile-menu">Close</span>
+      </header>
     );
   }
 }