Svelte 5: `<p><span><div>` compiles but doesn't render

[ppvg]

Describe the bug

Given this markup:

<p><div>hi</div></p>

...svelte 4 would happily compile and even render this (REPL).

The svelte 5 compiler correctly considers this a syntax error and provides a helpful error message (REPL):

</p> attempted to close element that was already automatically closed by <div>

However, when adding another element in between the div and p, e.g. <p><span><div></div></span></p>, it compiles without error. The JS output includes:

var frag = $.template(`<p><span><div></div></span></p>`);

Reproduction

This compiles:

<p><span><div>hi</div></span></p>

...and, when rendered, results in <p><span></span></p> (REPL).

This also compiles:

<script>let hi = $state('hi');</script>
<p><span><div>{hi}</div></span></p>

...and, when rendered, results in a confusing TypeError (REPL):

'get firstChild' called on an object that does not implement interface Node.

System Info

System:
    OS: Linux 6.6 Fedora Linux 39 (KDE Plasma)
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.10.0
    npm: 10.2.3
    pnpm: 8.13.1
  npmPackages:
    svelte: 5.0.0-next.30 => 5.0.0-next.30

Severity

annoyance

[7nik]

duplicate of #10109

if you try insert your code into a browser, it will correct it to <p><span></span></p><div>no error?</div><p></p>

[ppvg]

I am aware, and <p><div>hi</div></p> results in a helpful error. 👍

But:

• <p><span><div>hi</div></span></p> results in the div silently being dropped.
• <p><custom-element><div>hi</div></custom-element></p> results in TypeError: 'get firstChild' called on an object that does not implement interface Node.

@7nik do you want me do add ☝️ this to #10109 and close this ticket?

Edit: I've had another look, it seems the second case can be simplified to:

<script>let hi = $state('hi');</script>
<p><span><div>{hi}</div></span></p>

I'll update the ticket as well.

[7nik]

The second example crashes due to the error presented by the first example - a browser seems to close <p> when it sees <div>, which results in a DOM structure other than Svelte expects.

[ppvg]

@7nik: yeah that seems right. Thanks, I've updated the ticket to make it more clear it's a compilation issue.