fix: islands are not being rendered correctly (#8580)

withastro · Sep 18, 2023 · 8d36116 · 8d36116
1 parent fca6892
commit 8d36116
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/eighty-trainers-accept.md b/.changeset/eighty-trainers-accept.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+add hide to style & script generated for island
diff --git a/packages/astro/src/runtime/server/scripts.ts b/packages/astro/src/runtime/server/scripts.ts
@@ -1,7 +1,7 @@
 import type { SSRResult } from '../../@types/astro.js';
 import islandScript from './astro-island.prebuilt.js';
 
-const ISLAND_STYLES = `<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>`;
+const ISLAND_STYLES = `<style style="display:none">astro-island,astro-slot,astro-static-slot{display:contents}</style>`;
 
 export function determineIfNeedsHydrationScript(result: SSRResult): boolean {
 	if (result._metadata.hasHydrationScript) {
@@ -36,12 +36,12 @@ export function getPrescripts(result: SSRResult, type: PrescriptType, directive:
 	// deps to be loaded immediately.
 	switch (type) {
 		case 'both':
-			return `${ISLAND_STYLES}<script>${getDirectiveScriptText(
+			return `${ISLAND_STYLES}<script style="display:none">${getDirectiveScriptText(
 				result,
 				directive
 			)};${islandScript}</script>`;
 		case 'directive':
-			return `<script>${getDirectiveScriptText(result, directive)}</script>`;
+			return `<script style="display:none">${getDirectiveScriptText(result, directive)}</script>`;
 	}
 	return '';
 }