7 files changed, 19 insertions, 25 deletions
diff --git a/examples/framework-lit/src/components/Test.js b/examples/framework-lit/src/components/calc-add.js
index 7f565f777..b0b3978bf 100644
--- a/examples/framework-lit/src/components/Test.js
+++ b/examples/framework-lit/src/components/calc-add.js
@@ -1,8 +1,6 @@
 import { LitElement, html } from 'lit';
 
-export const tagName = 'calc-add';
-
-class CalcAdd extends LitElement {
+export class CalcAdd extends LitElement {
 	static get properties() {
 		return {
 			num: {
@@ -16,4 +14,4 @@ class CalcAdd extends LitElement {
 	}
 }
 
-customElements.define(tagName, CalcAdd);
+customElements.define('calc-add', CalcAdd);
diff --git a/examples/framework-lit/src/components/Counter.js b/examples/framework-lit/src/components/my-counter.js
index 35fa8dbbb..adc9e4a3d 100644
--- a/examples/framework-lit/src/components/Counter.js
+++ b/examples/framework-lit/src/components/my-counter.js
@@ -1,8 +1,6 @@
 import { LitElement, html } from 'lit';
 
-export const tagName = 'my-counter';
-
-class Counter extends LitElement {
+export class MyCounter extends LitElement {
 	static get properties() {
 		return {
 			count: {
@@ -31,4 +29,4 @@ class Counter extends LitElement {
 	}
 }
 
-customElements.define(tagName, Counter);
+customElements.define('my-counter', MyCounter);
diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro
index 6b825848e..3f45d057f 100644
--- a/examples/framework-lit/src/pages/index.astro
+++ b/examples/framework-lit/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import Lorem from '../components/Lorem.astro';
-import '../components/Test.js';
-import '../components/Counter.js';
+import { CalcAdd } from '../components/calc-add.js';
+import { MyCounter } from '../components/my-counter.js';
 ---
 
 <!DOCTYPE html>
@@ -12,8 +12,8 @@ import '../components/Counter.js';
 	</head>
 	<body>
 		<h1>Test app</h1>
-		<my-counter client:load></my-counter>
+		<MyCounter client:load></MyCounter>
 		<Lorem />
-		<calc-add num={33}></calc-add>
+		<CalcAdd num={33}></CalcAdd>
 	</body>
 </html>
diff --git a/examples/integrations-playground/src/components/Test.js b/examples/integrations-playground/src/components/calc-add.js
index 7f565f777..b0b3978bf 100644
--- a/examples/integrations-playground/src/components/Test.js
+++ b/examples/integrations-playground/src/components/calc-add.js
@@ -1,8 +1,6 @@
 import { LitElement, html } from 'lit';
 
-export const tagName = 'calc-add';
-
-class CalcAdd extends LitElement {
+export class CalcAdd extends LitElement {
 	static get properties() {
 		return {
 			num: {
@@ -16,4 +14,4 @@ class CalcAdd extends LitElement {
 	}
 }
 
-customElements.define(tagName, CalcAdd);
+customElements.define('calc-add', CalcAdd);
diff --git a/examples/integrations-playground/src/components/Counter.js b/examples/integrations-playground/src/components/my-counter.js
index 35fa8dbbb..adc9e4a3d 100644
--- a/examples/integrations-playground/src/components/Counter.js
+++ b/examples/integrations-playground/src/components/my-counter.js
@@ -1,8 +1,6 @@
 import { LitElement, html } from 'lit';
 
-export const tagName = 'my-counter';
-
-class Counter extends LitElement {
+export class MyCounter extends LitElement {
 	static get properties() {
 		return {
 			count: {
@@ -31,4 +29,4 @@ class Counter extends LitElement {
 	}
 }
 
-customElements.define(tagName, Counter);
+customElements.define('my-counter', MyCounter);
diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro
index 06c9aa3d8..66475f3e7 100644
--- a/examples/integrations-playground/src/pages/index.astro
+++ b/examples/integrations-playground/src/pages/index.astro
@@ -2,8 +2,8 @@
 import Lorem from '../components/Lorem.astro';
 import Link from '../components/Link.jsx';
 import SolidCounter from '../components/SolidCounter.jsx';
-import '../components/Test.js';
-import '../components/Counter.js';
+import { CalcAdd } from '../components/calc-add.js';
+import { MyCounter } from '../components/my-counter.js';
 ---
 
 <!DOCTYPE html>
@@ -18,11 +18,11 @@ import '../components/Counter.js';
       <strong>Party Mode!</strong>
       Colors changing = partytown is enabled
     </h2>
-		<my-counter client:load></my-counter>
+		<MyCounter client:load></MyCounter>
     <SolidCounter client:load></SolidCounter>
     <Link to="/foo" text="Go to Page 2" />
 		<Lorem />
-		<calc-add num={33}></calc-add>
+		<CalcAdd num={33}></CalcAdd>
     <script type="text/partytown">
       // Remove `type="text/partytown"` to see this block the page
       // and cause the page to become unresponsive
diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
index 8df0440c4..6644a8db1 100644
--- a/packages/astro/src/runtime/server/index.ts
+++ b/packages/astro/src/runtime/server/index.ts
@@ -358,7 +358,9 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 		}
 	}
 
-	if (renderer && !renderer.clientEntrypoint && metadata.hydrate) {
+	// HACK! The lit renderer doesn't include a clientEntrypoint for custom elements, allow it
+	// to render here until we find a better way to recognize when a client entrypoint isn't required.
+	if (renderer && !renderer.clientEntrypoint && renderer.name !== '@astrojs/lit' && metadata.hydrate) {
 		throw new Error(
 			`${metadata.displayName} component has a \`client:${metadata.hydrate}\` directive, but no client entrypoint was provided by ${renderer.name}!`
 		);