<!> is not valid XHTML regression in Svelte 5

[reckart]

Describe the bug

Svelte 4 could be used on XHTML documents. With Svelte 5, this seems to be no longer the case.

One issue is that <!> is used as a hydration marker in Svelte 5.

HTML fragments containing this marker can then be passed to create_fragment_from_html in reconciler.js:

export function create_fragment_from_html(html) {
	var elem = document.createElement('template');
	elem.innerHTML = html;
	return elem.content;
}

This then fails when trying to assign the HTML fragment to the element.innerHTML with the error message that the fragment is not valid XML.

The only workaround I found was post-processing the generated JS file and replacing instances of <!> with <!---->. With this replacement, the code seems to work. However, having to post-process the generated JS file using string operations is a really bad hack.

I believe Svelte code should not use <!> but rather <!----> to be compatible with XHTML/XML environments in the same way that Svelte 4 was.

Reproduction

I don't think my report is vague.

Logs

System Info

System:
    OS: macOS 14.7.4
    CPU: (8) arm64 Apple M2
    Memory: 134.42 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 135.0.7049.96
  npmPackages:
    svelte: ^5.25.12 => 5.27.1

Severity

blocking an upgrade

[paoloricciuti]

I think this could be fixed by #15538

[reckart]

@paoloricciuti looks like it might. I think that approach would also fix #15801.

Is there some way to test-drive #15538 without too much effort? Optimally, I would just have to replace a dependency line in package.json if possible?

[paoloricciuti]

Sure just do

pnpm add https://pkg.pr.new/svelte@15538

[reckart]

@paoloricciuti ok, tested. I switch to functional templating mode, checked the JS file to see if it actually is active:

          {
            e: "input",
            p: {
              class: "form-check-input svelte-yabzgr",
              type: "checkbox",
              role: "switch",
              id: "aggregatedLabelsEnabled"
            }
          },

Looks good - and now my components also load in XHTML.

Great work! How certain is it that this feature will be merged and approximately when?

[paoloricciuti]

Great work! How certain is it that this feature will be merged and approximately when?

Almost certain, it's a prerequisite to advance on the custom renderer API.