Linking to a page with a :global(...) style will wrongly apply that page's global styles to the current page when the link is hovered due to prefetching. While I understand global styles are meant to be global, this is a somewhat unexpected behavior when developing a +layout file that needs to style specific elements of <slot/>'d pages (e.g. we want to style all h1 elements that use the +layout of this route, so we use :global to prevent scoping the style to the layout itself, but this ends up impacting pages that link to the page using the +layout, which is unexpected and erroneous).
Reproduction
Create a new SvelteKit project.
Create a new page at /global/+page.svelte, then add the following contents:
<h1>Hello world from route!</h1>
3. In the default route at `/+page.svelte`, add a `<a>` pointing to `/global`, then add a `<h1>` element with any content anywhere in the page.
4. Hover over the link, and the `<h1>` will turn red.
Here's a StackBlitz which reproduces the issue: https://stackblitz.com/edit/sveltejs-kit-template-default-ptzm73?file=src%2Froutes%2F%2Bpage.svelte
### System Info
```Shell
System:
OS: Windows 10 10.0.22621
CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900KS
Memory: 47.98 GB / 63.75 GB
Binaries:
Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
npm: 9.5.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1702.0), Chromium (114.0.1823.37)
Internet Explorer: 11.0.22621.1
npmPackages:
@sveltejs/adapter-auto: ^2.0.0 => 2.1.0
@sveltejs/kit: ^1.5.0 => 1.20.2
svelte: ^3.54.0 => 3.59.1
vite: ^4.3.0 => 4.3.9
Describe the bug
Linking to a page with a
:global(...)
style will wrongly apply that page's global styles to the current page when the link is hovered due to prefetching. While I understand global styles are meant to be global, this is a somewhat unexpected behavior when developing a+layout
file that needs to style specific elements of<slot/>
'd pages (e.g. we want to style allh1
elements that use the+layout
of this route, so we use:global
to prevent scoping the style to the layout itself, but this ends up impacting pages that link to the page using the+layout
, which is unexpected and erroneous).Reproduction
/global/+page.svelte
, then add the following contents:Severity
Serious, but I can work around it.