From 187d5128af9ea388589f12e7b062b1e6a38ac67a Mon Sep 17 00:00:00 2001
From: Jonathan Neal <jonathantneal@hotmail.com>
Date: Mon, 31 Jan 2022 16:50:55 -0500
Subject: [PATCH] Fix issue rendering content within HTMLElement (#2506)

---
 .changeset/calm-suns-give.md               | 5 +++++
 packages/astro/src/runtime/server/index.ts | 9 ++-------
 2 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/calm-suns-give.md

diff --git a/.changeset/calm-suns-give.md b/.changeset/calm-suns-give.md
new file mode 100644
index 000000000..246b9ed49
--- /dev/null
+++ b/.changeset/calm-suns-give.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix an issue rendering content within HTMLElement
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index 859cc7857..bdc24d48e 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -442,7 +442,7 @@ export async function renderAstroComponent(component: InstanceType<typeof AstroC
 	return template;
 }
 
-export async function renderHTMLElement(result: SSRResult, constructor: typeof HTMLElement, props: any, children: any) {
+export async function renderHTMLElement(result: SSRResult, constructor: typeof HTMLElement, props: any, slots: any) {
 	const name = getHTMLElementName(constructor);
 
 	let attrHTML = '';
@@ -451,12 +451,7 @@ export async function renderHTMLElement(result: SSRResult, constructor: typeof H
 		attrHTML += ` ${attr}="${toAttributeString(await props[attr])}"`;
 	}
 
-	children = await children;
-	children = children == null ? children : '';
-
-	const html = `<${name}${attrHTML}>${children}</${name}>`;
-
-	return html;
+	return `<${name}${attrHTML}>${await renderSlot(result, slots?.default)}</${name}>`;
 }
 
 function getHTMLElementName(constructor: typeof HTMLElement) {