Using Svelte 5 to render onto XML documents in the browser

[reckart]

Svelte 4 was generating valid XML by self-closing void elements such as input. That meant, I could add programmatically add svelte components to XML documents rendered in the browser.

With Svelte 5, no self-closing elements are generated anymore to be more HTML 5 compliant. That means, I now get the error that the template cannot be rendered because the "content is not valid XML". This breaks rendering on documents that use XHTML.

I have tried manually self-closing the input element in my template - no luck.
I have also tried adding a closing tag to the input element in my template, but that now yields the error Void elements cannot have children or closing tags.

Is there some way to either tell Svelte 5 to generate proper XML/XHTML or to tell the compiler to hone my manually added closing elements because I actually know better what I need than the framework does?

Issues opened related to this discussion:

• <!> is not valid XHTML regression in Svelte 5 #15799
• <input> is not valid XHTML regression in Svelte 5 #15801

[brunnerh]

To my knowledge there is no compiler option for this.

How exactly do you interact with the XML and component code?
If you have an XML Document in the browser, HTML elements can be adopted into it and they will become valid XML in the process.

[reckart]

When I use my post-processing function to replace <!> with <!----> it seems to work. But this is really the most ugly hack having to post-process the generated/minified JS.

[brunnerh]

Actually, I have not seen those kinds of markers in a while, there were some compatiblity issues with them. As far as I know hydration markers that remain should all be proper comments with the <!-- and -->, so maybe this is something else.

You still have not provided a complete reproduction and don't understand how you even get that error.
Where is XML document? How are components added?
Have you tried mounting the components elsewhere first and then adopting them?

[reckart]

This is the component:

https://github.com/inception-project/inception/blob/73cb7c103cc0a62db8c8c7f18f8e4096b0aa5349/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorToolbar.svelte

This is how I mount it:

https://github.com/inception-project/inception/blob/73cb7c103cc0a62db8c8c7f18f8e4096b0aa5349/inception/inception-html-apache-annotator-editor/src/main/ts/src/apache-annotator/ApacheAnnotatorEditor.svelte.ts#L237-L253

The XHTML/XML document is rendered by the server into an IFrame into which I then inject the JS that I need in the IFrame.
For reference I'll post the links, but I think the way the document comes to pass is not too relevant:

• https://github.com/inception-project/inception/blob/73cb7c103cc0a62db8c8c7f18f8e4096b0aa5349/inception/inception-external-editor/src/main/java/de/tudarmstadt/ukp/inception/externaleditor/xhtml/XHtmlXmlDocumentViewControllerImpl.java#L133
• https://github.com/inception-project/inception/blob/73cb7c103cc0a62db8c8c7f18f8e4096b0aa5349/inception/inception-external-editor/src/main/ts/src/ExternalEditorFactory.ts

[reckart]

There is an active PR which seems to fix the XHTML compatibility: #15538

I tried the PR locally and it seemed to work ok.

[brunnerh]

Seen it, this can probably be marked as resolved referencing the said PR.