Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

{#await} hydratation in head is broken #9329

Open
enda opened this issue Oct 18, 2023 · 1 comment
Open

{#await} hydratation in head is broken #9329

enda opened this issue Oct 18, 2023 · 1 comment

Comments

@enda
Copy link

enda commented Oct 18, 2023 •
edited
Loading

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 svelte:head around template, it seems to be ok.
I believe {#await} is losing its svelte:head 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} : #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 enda mentioned this issue Oct 18, 2023
Closed
@enda
Copy link
Author

enda commented Oct 18, 2023 •
edited
Loading

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 : #9332

@enda enda mentioned this issue Oct 18, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@enda