sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.8k stars 4.24k forks source link

{#await} hydratation in head is broken #9329

Open enda opened 1 year ago

enda commented 1 year ago

Describe the bug

When using an {#await} in svelte:head, the head elements starts to be broken: the awaited elements are never destroy on route change.

But, if I await a component in svelte:head, which itself has a around template, it seems to be ok. I believe {#await} is losing its scope, and using a component with a svelte:head is a possible work around to redefine the scope, but it's not very elegant in some cases.

Possible similar issue fixed last year about duplicate element in head with {@html} : https://github.com/sveltejs/svelte/issues/6463

Reproduction

Create an app

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

Add this code just before </svelte:head>

  {#await true then}
    <link rel="hello" as="world" />
  {/await}

Open browser and console, change route and come back to home, you have two <link rel="hello" as="world />

Move <link rel="hello" as="world" /> in a component like that to make it works:

<!--  MyComponent.svelte -->
<svelte:head>
  <link rel="hello" as="world" />
</svelte:head>

Logs

No log

System Info

System:
    OS: macOS 13.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
    Memory: 174.19 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 118.0.5993.70
    Safari: 16.6
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/adapter-node: ^1.3.1 => 1.3.1 
    @sveltejs/kit: ^1.20.4 => 1.25.2 
    svelte: ^4.0.5 => 4.2.1 
    vite: ^4.4.2 => 4.4.11

Severity

annoyance

enda commented 1 year ago

UPDATE:

The possible work around with a new components wrapping elements in its <svelte:head> is not rendered by SSR. Without <svelte:head> in children component, it is. Inception of <svelte:head> is finally not a good idea.

It become a blocking issue for me

It's also very useful for exemple to add a <link rel="preload"> for images above the fold from a Card component from <body>.

UPDATE2: Without <svelte:head> in component, the component is not removed from <head> after route change. Opened a second issue here : https://github.com/sveltejs/svelte/issues/9332