diff options
| -rw-r--r-- | .changeset/spotty-bats-nail.md | 6 | ||||
| -rw-r--r-- | packages/astro/src/transitions/router.ts | 7 |
2 files changed, 7 insertions, 6 deletions
diff --git a/.changeset/spotty-bats-nail.md b/.changeset/spotty-bats-nail.md new file mode 100644 index 000000000..42a68b592 --- /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 db5a5ea73..c9dd2497e 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)); } |