Fix `astro-static-slot` hydration mismatch error (#7196)

3 files changed, 7 insertions, 4 deletions

diff --git a/packages/integrations/preact/src/static-html.ts b/packages/integrations/preact/src/static-html.ts
index f0fbd885c..453e72b7f 100644
--- a/packages/integrations/preact/src/static-html.ts
+++ b/packages/integrations/preact/src/static-html.ts
@@ -13,9 +13,9 @@ type Props = {
  * As a bonus, we can signal to Preact that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name, hydrate }: Props) => {
+const StaticHtml = ({ value, name, hydrate = true }: Props) => {
 	if (!value) return null;
-	const tagName = hydrate === false ? 'astro-static-slot' : 'astro-slot';
+	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
 	return h(tagName, { name, dangerouslySetInnerHTML: { __html: value } });
 };
 
diff --git a/packages/integrations/react/static-html.js b/packages/integrations/react/static-html.js
index 37fda1983..e319a40c7 100644
--- a/packages/integrations/react/static-html.js
+++ b/packages/integrations/react/static-html.js
@@ -7,7 +7,7 @@ import { createElement as h } from 'react';
  * As a bonus, we can signal to React that this subtree is
  * entirely static and will never change via `shouldComponentUpdate`.
  */
-const StaticHtml = ({ value, name, hydrate }) => {
+const StaticHtml = ({ value, name, hydrate = true }) => {
 	if (!value) return null;
 	const tagName = hydrate ? 'astro-slot' : 'astro-static-slot';
 	return h(tagName, {
diff --git a/packages/integrations/vue/static-html.js b/packages/integrations/vue/static-html.js
index 34740f88f..885319026 100644
--- a/packages/integrations/vue/static-html.js
+++ b/packages/integrations/vue/static-html.js
@@ -10,7 +10,10 @@ const StaticHtml = defineComponent({
 	props: {
 		value: String,
 		name: String,
-		hydrate: Boolean,
+		hydrate: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	setup({ name, value, hydrate }) {
 		if (!value) return () => null;