Astro Info

Astro                    v6.0.4
Vite                     v7.3.1
Node                     v22.22.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/vue (v6.0.0)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Vue components typically have scoped styles. Sometimes, it is necessary to "break into" those scoped styles from a parent component to change things. For this, Vue provides the :deep-selector.

After upgrading to Astro v6, these styles set via the :deep-selector are no longer applied when running in dev mode with the <ClientRouter /> Astro component active. They appear (delayed) after the first load and a hard refresh, but navigating between pages does not apply them correctly.

Removing <ClientRouter /> fixes the issue. It doesn't seem like there is a correlation between components being hydrated with a client: directive or not, the issue persists in both cases.

After the site is built, the issue does not occur.

What's the expected result?

Styles applied with :deep are consistently applied on client-side navigations. Behaviour during dev matches that after build.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-5h86mej1?file=src%2Fcomponents%2FComponentWithScopedStyles.vue

Participation

• I am willing to submit a pull request for this issue.