diff --git a/docs/pages/docs.md b/docs/pages/docs.md
index c28e66aa..03b1403e 100644
--- a/docs/pages/docs.md
+++ b/docs/pages/docs.md
@@ -385,7 +385,7 @@ There are of couple things you will need to do to use WCC with JSX:
 
 ### TSX
 
-TSX (.tsx) file are also supported and your HTML will also be **type-safe**. You'll need to configure JSX in your _tsconfig.json_ by adding these two lines to your `compilerOptions` settings:
+TSX (.tsx) file are also supported and your HTML will also be **type-safe**. You'll need to configure JSX in your _tsconfig.json_ by adding these required (and recommend) entries into to your `compilerOptions` settings:
 
 <!-- prettier-ignore-start -->
 
@@ -395,6 +395,7 @@ TSX (.tsx) file are also supported and your HTML will also be **type-safe**. You
     // required options
     "jsx": "preserve",
     "jsxImportSource": "wc-compiler",
+    "lib": ["DOM"],
 
     // additional recommended options
     "allowImportingTsExtensions": true,
diff --git a/package-lock.json b/package-lock.json
index da1deb04..5430a882 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "wc-compiler",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "wc-compiler",
-      "version": "0.18.0",
+      "version": "0.19.0",
       "license": "MIT",
       "dependencies": {
         "@projectevergreen/acorn-jsx-esm": "~0.1.0",
@@ -47,7 +47,7 @@
         "remark-toc": "^8.0.1",
         "rimraf": "^3.0.2",
         "simple.css": "^0.1.3",
-        "typescript": "^5.8.2",
+        "typescript": "^5.9.3",
         "typescript-eslint": "^8.46.2",
         "unified": "^10.1.2"
       },
@@ -8976,9 +8976,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -15837,9 +15837,9 @@
       }
     },
     "typescript": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
-      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true
     },
     "typescript-eslint": {
diff --git a/package.json b/package.json
index 0e0e250d..a654b10f 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "remark-toc": "^8.0.1",
     "rimraf": "^3.0.2",
     "simple.css": "^0.1.3",
-    "typescript": "^5.8.2",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
     "unified": "^10.1.2"
   }
diff --git a/src/jsx.d.ts b/src/jsx.d.ts
index 2dc9baa3..86f1f569 100644
--- a/src/jsx.d.ts
+++ b/src/jsx.d.ts
@@ -1,20 +1,24 @@
 // to support `style` attributes, we override `CSSStyleDeclaration` with `string`
 type IsCSSStyleDeclaration<T> = T extends CSSStyleDeclaration ? string : T;
 
-// create a utility type to extract the attributes from any given element's DOM interface.
+// 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.
+  // 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;
+  // 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
+  popovertarget?: string;
+  popovertargetaction?: 'show' | 'hide' | 'toggle';
 };
 
-// map each HTML tag to a union of its attributes and the global attributes.
+// map each HTML tag to its attributes
 type IntrinsicElementsFromDom = {
   [E in keyof HTMLElementTagNameMap]: ElementAttributes<HTMLElementTagNameMap[E]>;
 };
 
-// declare the global JSX namespace with your generated intrinsic elements.
 declare namespace JSX {
   interface IntrinsicElements extends IntrinsicElementsFromDom {}
 }
diff --git a/test/cases/tsx/src/header.tsx b/test/cases/tsx/src/header.tsx
new file mode 100644
index 00000000..288d2201
--- /dev/null
+++ b/test/cases/tsx/src/header.tsx
@@ -0,0 +1,10 @@
+// testing for https://github.com/ProjectEvergreen/wcc/issues/228
+export default class Header extends HTMLElement {
+  render() {
+    return (
+      <button popovertarget="mobile-menu" popovertargetaction="hide">
+        Close
+      </button>
+    );
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 9fa57aad..f845e8f9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,8 @@
     "noImplicitAny": true,
     "types": ["mocha", "node"],
     "jsx": "preserve",
-    "jsxImportSource": "wc-compiler"
+    "jsxImportSource": "wc-compiler",
+    "lib": ["DOM"]
   },
   "exclude": ["node_modules"]
 }