svelte:element this={"script"} hydration_mismatch

[cloudymeatball]

Describe the bug

Hydration_mismatch error appears to be related to <svelte:element this={"script"} type="application/ld+json">

Reproduction

default sv blank project, no addons

<!-- +page.svelte -->
<svelte:head>
  <title>Expect flash</title>
  <svelte:element this={"script"} type="application/ld+json">
    {"{}"}
  </svelte:element>
</svelte:head>

<div>
Expect page to flash then no css. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aut magni aperiam quod, adipisci quas temporibus atque voluptas quis magnam repudiandae? Laborum deserunt magni error quos modi eaque, deleniti nesciunt sequi ullam laboriosam esse assumenda provident est? Provident corporis ipsam, accusamus velit asperiores suscipit accusantium soluta maxime magnam, ad debitis.
</div>

<style>
  div {
    height: 300px;
    width: 300px;
    background-color: #aaa;
  }
</style>

Page flashes on hydration, then css is gone.
Same error when replaced with template literal.
Same error when string defined in <script> and a variable is used.
No error with other svelte:element types.
No error when replacing with {@html ... }

In a current project, this <svelte:element> set up works on one page but throws hydration_mismatch on a different page. Having trouble replicating the difference, but above code reproduces error.

Logs

stack trace of [svelte] hydration_mismatch

// chunk
function set_hydrate_node(node) {
  if (node === null) {
    hydration_mismatch();
    throw HYDRATION_ERROR; // THROWS ERROR <======
  }
  return hydrate_node = node;
}
function hydrate_next() {
  return set_hydrate_node(
    /** @type {TemplateNode} */
    get_next_sibling(hydrate_node)
  );
}


```js
// chunk
function append(anchor, dom) {
  if (hydrating) {
    active_effect.nodes_end = hydrate_node;
    hydrate_next(); // ERROR <===============
    return;
  }
...

_page($$anchor, $$props){
  $.head(($$anchor) => {
    ...
    $.element(
      node,
      () => "script",
      false,
      ($$element, $$anchor) => {
        $.set_attributes($$element, null, { type: "application/ld+json" }, "s-y_bCXRrkrYfP", $$element.namespaceURI === $.NAMESPACE_SVG, $$element.nodeName.includes("-"));

        var text = $.text();

        text.nodeValue = `{}`;
        $.append($$anchor, text); // ERROR <================
        // both $$anchor and text points to the same <script> element
      },
      undefined,
      [3, 2]
    );
  }
}

### System Info

```shell
System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.18.0 - Path\To\Node
    npm: 10.9.0 - Path\To\npm
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: ^5.0.0 => 5.9.0

same error across browsers, chrome, firefox, when js is on

Severity

annoyance

[trueadm]

I believe there was a similar issue to this recently. Essentially, <svelte:element> is the wrong thing to be used for this task as script elements don't have HTML contents, but rather text contents, so it causes hydration to fail. We should probably add an error when trying to use it this way.

Instead you should be using @html, @dummdidumm do you remember the issue? I tried to find it but couldn't

[cloudymeatball]

Link to issue mentioned by truadm #10130 (there may be others I'm not sure)
{@html ...} works for me because I'm using SSR
However as it stands I have a file with <svelte:element> this={"script"} working and I'll try to reproduce that before closing, as the mentioned issue diverges into {@html} so it's not a complete duplicate.

[cloudymeatball]

OK so where it "worked" was when I did something like

<script>
  let condition = $state()
  $effect(()=>{condition = 'foobar'})
</script>

<svelte:head>
  <title>No more flash</title>
  {#if condition}
    <svelte:element this={"script"} type="application/ld+json">
      {"{}"}
    </svelte:element>
  {/if}
</svelte:head>

The result is that it doesn't show up on ssr but during hydration the json-ld is added. (No-js means no json-ld and with client-side js there is the json-ld.)

Just leaving that here in case it's ever relevant. My original question has been answered. An error would be nice. Though I am also curious as to how the introduction of #if and $effect somewhat bypasses this issue.

[trueadm]

OK so where it "worked" was when I did something like

<script>
  let condition = $state()
  $effect(()=>{condition = 'foobar'})
</script>

<svelte:head>
  <title>No more flash</title>
  {#if condition}
    <svelte:element this={"script"} type="application/ld+json">
      {"{}"}
    </svelte:element>
  {/if}
</svelte:head>

The result is that it doesn't show up on ssr but during hydration the json-ld is added. (No-js means no json-ld and with client-side js there is the json-ld.)

Just leaving that here in case it's ever relevant. My original question has been answered. An error would be nice. Though I am also curious as to how the introduction of #if and $effect somewhat bypasses this issue.

During SSR we expect the element to be able to have children – which there is none of as it's a script tag. So we put in an anchor comment inside which the browser then moves outside, causing hydration to mismatch. The reason this works is because you're adding the script after hydration.