repair href attribute mismatches from a component using spread props and resolveRoute

[AndreasHald]

Describe the bug

in #13032 @dummdidumm talks about when href are server side generated they are rendered with relative paths, however on the client they need to be absolute so when the application hydrates it replaces the href with an absolute instead of a relative.

It creates a bit of an edge case where if you put links in a layout file and navigate up/down the paths break if they are not absolute.

It appears that if you use resolveRoute and a component that spread in href on the a tag, this functionality breaks.

Reproduction

I've created a simple example here It includes 3 links in the layout file

If you serve the app and go to /bar and inspect the links, you can see that 2 of them has been hydrated from relative -> absolute urls, however the third has not.

Here is the LinkButton component for simplicity

Changing it to this

solves the issue

Logs

System Info

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 719.09 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
  Browsers:
    Chrome: 131.0.6778.265
    Safari: 18.2
  npmPackages:
    svelte: ^5.0.0 => 5.19.3

Severity

annoyance

[boyeln]

This broke our app recently, and it's not nice to work around. Take this simple using sveltekit:

<script>
  import { base } from "$app/paths";
  const someObject = {};
</script>

<a href="{base}/some/path" {...someObject}>Inspect me</a>

If you inspect the href in the browser it is "./some/path" even after hydration.

When using component libraries, it's quite common to spread props on all sorts of elements, to allow users to specify any valid pops and pass it through to the native html element. Which would then make it impossible to use base as part of the url/href you send to the component.

Example:

<script>
  import { base } from "$app/paths";
  import { Link } from "some-component-library";
</script>

<Link href="{base}/some/path">Broken url</Link>

Our current workaround is to wrap every Link component that uses base in {#if browser} which isn't the nicest.