Tags in "<text>" tag becomes invisible

[AlexDev404]

Describe the bug

Text and children inside of any tag "<text>" is rendered invisible by SvelteKit.

Reproduction

Take a look at the following example for an explanation:
https://svelte.dev/repl/22bc62add48d4c3299a4ea2eef14a8dc?version=4.2.19

In brief, any content that is placed in a "" tag will be rendered invisible inside of the browser.

<!-- This example is also reproducible even when nested inside of other elements --->
<text>
   <h1>You can't see this</h1>
</text>

This has nothing to do with CSS.

Logs

No logs were output.

System Info

I don't know the specific configuration of the SvelteKit REPL, but I have tried it in multiple browsers (FireFox, Microsoft Edge, Google Chrome) and all seem to output the same

Severity

serious, but I can work around it

Additional Information

We're currently using "<text>" inside our components, and after upgrading our SvelteKit version, because of this, most of our components are being rendered invisible now.

[Conduitry]

Transferring this to the Svelte repo.

<text> is an SVG element, and I'm not sure what a genuine use case would be to have <text> outside of an SVG. That this doesn't work is probably something to do with namespace handling in Svelte.

That said, it does appear that this works in Svelte 5, so I think we're unlikely to do anything about this in 4.

[AlexDev404]

Currently we're using custom tags in the HTML for the page
But currently there aren't any errors being displayed at all--even in Vite about it being an issue.
So I'm not really sure what's going on.

[AlexDev404]

Transferring this to the Svelte repo.

<text> is an SVG element, and I'm not sure what a genuine use case would be to have <text> outside of an SVG. That this doesn't work is probably something to do with namespace handling in Svelte.

That said, it does appear that this works in Svelte 5, so I think we're unlikely to do anything about this in 4.

Okay, so from what I'm understanding, Svelte doesn't completely support custom tagging fully as of right now?

[Ocean-OS]

Okay, so from what I'm understanding, Svelte doesn't completely support custom tagging fully as of right now?

No, it's just that the element you're trying to use is an existing element, but is being used in the incorrect format. <text> is an SVG element, meaning that Svelte treats it as such. It is strange however, that it doesn't display in Svelte yet it displays in vanilla HTML.

[Prinzhorn]

That said, it does appear that this works in Svelte 5, so I think we're unlikely to do anything about this in 4.

It behaves different than Svelte 4 (document.querySelector('text').namespaceURI ):

<text>Hello</text> is http://www.w3.org/2000/svg

<text>Hello</text> world is http://www.w3.org/1999/xhtml

So In Svelte 5 if <text> appears alone, it is considered SVG. If it appears with other content, it is considered HTML. This sounds somewhat reasonable, but it would be more "correct" if at runtime it would actually consider if it's inside an <svg> or not. That would align with what browsers seem to do since they're lenient to broken markup and will happily consider <text> in HTML. But on the other hand, Svelte doesn't need to render pages created in 1999.

[trueadm]

You should never overload the <text> element as a custom element, that's just not right. How Svelte 5 handles <text> in regards to SVG is definitely a separate issue if you feel strongly that it's not right.

[AlexDev404]

That said, it does appear that this works in Svelte 5, so I think we're unlikely to do anything about this in 4.

It behaves different than Svelte 4 (document.querySelector('text').namespaceURI ):

<text>Hello</text> is http://www.w3.org/2000/svg

<text>Hello</text> world is http://www.w3.org/1999/xhtml

So In Svelte 5 if <text> appears alone, it is considered SVG. If it appears with other content, it is considered HTML. This sounds somewhat reasonable, but it would be more "correct" if at runtime it would actually consider if it's inside an <svg> or not. That would align with what browsers seem to do since they're lenient to broken markup and will happily consider <text> in HTML. But on the other hand, Svelte doesn't need to render pages created in 1999.

Yeah, that's true.

[AlexDev404]

Okay, so from what I'm understanding, Svelte doesn't completely support custom tagging fully as of right now?

No, it's just that the element you're trying to use is an existing element, but is being used in the incorrect format. <text> is an SVG element, meaning that Svelte treats it as such. It is strange however, that it doesn't display in Svelte yet it displays in vanilla HTML.

Okay, understood.

[AlexDev404]

You should never overload the <text> element as a custom element, that's just not right. How Svelte 5 handles <text> in regards to SVG is definitely a separate issue if you feel strongly that it's not right.

Well the ideal behavior would probably be for Svelte to render based on whether the element is inside an <svg> tag at runtime, which would maintain consistency with how the browser handles older or broken markup. But still as how @trueadm mentions, I can see why Svelte might prioritize modern use cases and simplify things rather than accommodating legacy behavior.

[dummdidumm]

Closing as we won't change the behavior here, and because it works better in Svelte 5 - thank you