Expected Behavior
The cookie consent banner should persist across page navigations or correctly re-initialize when the user navigates to a new page using Astro's Client Side Router (SPA mode). Event listeners on buttons (Accept/Reject) should remain active after navigation.
Current Behavior
When using Astro 5 with ViewTransitions enabled (<ClientRouter />):
- The banner appears correctly on the initial page load.
- Upon navigating to another page via a link, Astro swaps the
<body> content.
- The banner either disappears completely (because it was injected into the old body) or remains visible (if persisted) but becomes unresponsive because its event listeners were attached to elements that no longer exist or the library's internal state is lost.
transition:persist does not solve the issue reliably for this external library as it manipulates the DOM directly outside of the framework's component tree.
Steps to reproduce
- Create a new Astro 5 project.
- Enable the Client Router (add
import { ClientRouter } from 'astro:transitions'; and <ClientRouter /> in the layout).
- Install and initialize
vanilla-cookieconsent in the main layout/script.
- Start the dev server and open the homepage (Banner appears).
- Click any internal link to navigate to a subpage.
- Result: The banner vanishes or the buttons stop reacting to clicks.
Proposed fix or additional info.
According to this analysis on Astro 5 architecture, the issue stems from the library using document.body.appendChild
Version
3.1.0
On which browser do you see the issue?
No response
Expected Behavior
The cookie consent banner should persist across page navigations or correctly re-initialize when the user navigates to a new page using Astro's Client Side Router (SPA mode). Event listeners on buttons (Accept/Reject) should remain active after navigation.
Current Behavior
When using Astro 5 with ViewTransitions enabled (
<ClientRouter />):<body>content.transition:persistdoes not solve the issue reliably for this external library as it manipulates the DOM directly outside of the framework's component tree.Steps to reproduce
import { ClientRouter } from 'astro:transitions'; and<ClientRouter />in the layout).vanilla-cookieconsentin the main layout/script.Proposed fix or additional info.
According to this analysis on Astro 5 architecture, the issue stems from the library using
document.body.appendChildVersion
3.1.0
On which browser do you see the issue?
No response