From f684e9d361e3780889ea6e6b3394c0f583bd839a Mon Sep 17 00:00:00 2001
From: Josh Kramer <josh@joshkra.me>
Date: Tue, 18 Oct 2022 09:23:48 -0400
Subject: [PATCH] Implicit element types (#5098)

* Separate arbitrary intrinsic element definition

* Create changeset
---
 .changeset/little-dodos-beam.md | 5 +++++
 packages/astro/astro-jsx.d.ts   | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/little-dodos-beam.md

diff --git a/.changeset/little-dodos-beam.md b/.changeset/little-dodos-beam.md
new file mode 100644
index 000000000..09bd0d7cf
--- /dev/null
+++ b/.changeset/little-dodos-beam.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Separate type definitions for built-in HTML elements and custom elements. Helpful when implementing an "as" prop similar to [styled-components](https://styled-components.com/docs/api#as-polymorphic-prop).
diff --git a/packages/astro/astro-jsx.d.ts b/packages/astro/astro-jsx.d.ts
index aa7c0a573..a750c29f2 100644
--- a/packages/astro/astro-jsx.d.ts
+++ b/packages/astro/astro-jsx.d.ts
@@ -1288,7 +1288,7 @@ declare namespace astroHTML.JSX {
 		zoomAndPan?: string | undefined | null;
 	}
 
-	interface IntrinsicElements {
+	interface DefinedIntrinsicElements {
 		// HTML
 		a: AnchorHTMLAttributes;
 		abbr: HTMLAttributes;
@@ -1461,8 +1461,10 @@ declare namespace astroHTML.JSX {
 		tspan: SVGAttributes;
 		use: SVGAttributes;
 		view: SVGAttributes;
+	}
 
-		// Allow for arbitrary elements
-		[name: string]: { [name: string]: any };
+	interface IntrinsicElements extends DefinedIntrinsicElements {
+	  // Allow for arbitrary elements
+	  [name: string]: { [name: string]: any };
 	}
 }