From 8306ce1ff7b71a2a0d7908336c9be462a54d395a Mon Sep 17 00:00:00 2001
From: Martin Trapp <94928215+martrapp@users.noreply.github.com>
Date: Fri, 22 Mar 2024 15:36:40 +0100
Subject: [PATCH] Fixes a style issue of `client:only` components in DEV mode
 during view transitions. (#10532)

* Fix DEV-mode-only style issue of client:only components during view transitions.

* reworded changeset

* fixed quotes
---
 .changeset/spotty-bats-nail.md           | 6 ++++++
 packages/astro/src/transitions/router.ts | 7 +------
 2 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/spotty-bats-nail.md

diff --git a/.changeset/spotty-bats-nail.md b/.changeset/spotty-bats-nail.md
new file mode 100644
index 000000000000..42a68b5925db
--- /dev/null
+++ b/.changeset/spotty-bats-nail.md
@@ -0,0 +1,6 @@
+---
+"astro": patch
+---
+
+Fixes a style issue of `client:only` components in DEV mode during view transitions.
+
diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts
index db5a5ea731e9..c9dd2497ef45 100644
--- a/packages/astro/src/transitions/router.ts
+++ b/packages/astro/src/transitions/router.ts
@@ -696,18 +696,13 @@ async function prepareForClientOnlyComponents(newDocument: Document, toLocation:
 
 		const nextHead = nextPage.contentDocument?.head;
 		if (nextHead) {
-			// Clear former persist marks
-			document.head
-				.querySelectorAll(`style[${PERSIST_ATTR}=""]`)
-				.forEach((s) => s.removeAttribute(PERSIST_ATTR));
-
 			// Collect the vite ids of all styles present in the next head
 			const viteIds = [...nextHead.querySelectorAll(`style[${VITE_ID}]`)].map((style) =>
 				style.getAttribute(VITE_ID)
 			);
 			// Copy required styles to the new document if they are from hydration.
 			viteIds.forEach((id) => {
-				const style = document.head.querySelector(`style[${VITE_ID}="${id}"]`);
+				const style = nextHead.querySelector(`style[${VITE_ID}="${id}"]`);
 				if (style && !newDocument.head.querySelector(`style[${VITE_ID}="${id}"]`)) {
 					newDocument.head.appendChild(style.cloneNode(true));
 				}