Svelte 5: Figure inside paragraph throws obscure error when rendering $state rune

[brunocalou]

Describe the bug

When using a picture tag inside a p tag (which is wrong, but used to work before) and rendering a $state rune, it throws an exception. It works if no $state is rendered or if picture is outside p.

It was hard to understand the problem since the error is just thrown when a $state is rendered. I think the error comes from the DOM itself, not from Svelte, but it would be great if Svelte could detect forbidden elements inside paragraphs and tell me it is invalid.

Reproduction

https://svelte.dev/playground/a6e165a6c39a42af8dc2c1a0f676d17a?version=5.1.2

Logs

Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

	in +layout.svelte
	in root.svelte

    at Module.child (chunk-WZFGCPRD.js?v=94465511:2045:27)
    at SolitaireHowToPlayButton.svelte:10:8
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at Dialog (Dialog.svelte:50:48)
    at SolitaireHowToPlayButton (SolitaireHowToPlayButton.svelte:10:8)
    at Solitaire.svelte:125:36
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at GameLayout (GameLayout.svelte:37:81)
    at Solitaire (Solitaire.svelte:108:74)
    at +page.svelte:29:49
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at PageTransition (PageTransition.svelte:4:36)
    at _page (+page.svelte:29:49)
    at root.svelte:58:27
    at chunk-SDAHTBKB.js?v=94465511:1153:30
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at branch (chunk-WZFGCPRD.js?v=94465511:2288:10)
    at chunk-SDAHTBKB.js?v=94465511:1153:17
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at block (chunk-WZFGCPRD.js?v=94465511:2285:10)
    at Module.component (chunk-SDAHTBKB.js?v=94465511:1146:3)
    at root.svelte:58:27
    at chunk-SDAHTBKB.js?v=94465511:536:41
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at branch (chunk-WZFGCPRD.js?v=94465511:2288:10)
    at chunk-SDAHTBKB.js?v=94465511:536:28
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at block (chunk-WZFGCPRD.js?v=94465511:2285:10)
    at Module.if_block (chunk-SDAHTBKB.js?v=94465511:506:3)
    at root.svelte:48:57
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at _layout (+layout.svelte:2:21)
    at root.svelte:46:19
    at chunk-SDAHTBKB.js?v=94465511:1153:30
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at branch (http://localhost:5173/node_modules/.vite/deps/chunk-WZFGCPRD.js?v=94465511:2288:10)Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Module.child (chunk-WZFGCPRD.js?v=94465511:2045:27)
    at SolitaireHowToPlayButton.svelte:10:8
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at Dialog (Dialog.svelte:50:48)
    at SolitaireHowToPlayButton (SolitaireHowToPlayButton.svelte:10:8)
    at Solitaire.svelte:125:36
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at GameLayout (GameLayout.svelte:37:81)
    at Solitaire (Solitaire.svelte:108:74)
    at +page.svelte:29:49
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at PageTransition (PageTransition.svelte:4:36)
    at _page (+page.svelte:29:49)
    at root.svelte:58:27
    at chunk-SDAHTBKB.js?v=94465511:1153:30
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at branch (chunk-WZFGCPRD.js?v=94465511:2288:10)
    at chunk-SDAHTBKB.js?v=94465511:1153:17
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at block (chunk-WZFGCPRD.js?v=94465511:2285:10)
    at Module.component (chunk-SDAHTBKB.js?v=94465511:1146:3)
    at root.svelte:58:27
    at chunk-SDAHTBKB.js?v=94465511:536:41
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at branch (chunk-WZFGCPRD.js?v=94465511:2288:10)
    at chunk-SDAHTBKB.js?v=94465511:536:28
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at block (chunk-WZFGCPRD.js?v=94465511:2285:10)
    at Module.if_block (chunk-SDAHTBKB.js?v=94465511:506:3)
    at root.svelte:48:57
    at chunk-SDAHTBKB.js?v=94465511:1105:14
    at Module.slot (chunk-SDAHTBKB.js?v=94465511:1065:5)
    at _layout (+layout.svelte:2:21)
    at root.svelte:46:19
    at chunk-SDAHTBKB.js?v=94465511:1153:30
    at update_reaction (chunk-WZFGCPRD.js?v=94465511:1053:23)
    at update_effect (chunk-WZFGCPRD.js?v=94465511:1144:21)
    at create_effect (chunk-WZFGCPRD.js?v=94465511:2156:7)
    at branch (chunk-WZFGCPRD.js?v=94465511:2288:10)
child @ chunk-WZFGCPRD.js?v=94465511:2045
(anonymous) @ SolitaireHowToPlayButton.svelte:10
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1105
slot @ chunk-SDAHTBKB.js?v=94465511:1065
Dialog @ Dialog.svelte:50
SolitaireHowToPlayButton @ SolitaireHowToPlayButton.svelte:10
(anonymous) @ Solitaire.svelte:125
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1105
slot @ chunk-SDAHTBKB.js?v=94465511:1065
GameLayout @ GameLayout.svelte:37
Solitaire @ Solitaire.svelte:108
(anonymous) @ +page.svelte:29
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1105
slot @ chunk-SDAHTBKB.js?v=94465511:1065
PageTransition @ PageTransition.svelte:4
_page @ +page.svelte:29
(anonymous) @ root.svelte:58
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1153
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
branch @ chunk-WZFGCPRD.js?v=94465511:2288
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1153
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
block @ chunk-WZFGCPRD.js?v=94465511:2285
component @ chunk-SDAHTBKB.js?v=94465511:1146
(anonymous) @ root.svelte:58
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:536
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
branch @ chunk-WZFGCPRD.js?v=94465511:2288
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:536
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
block @ chunk-WZFGCPRD.js?v=94465511:2285
if_block @ chunk-SDAHTBKB.js?v=94465511:506
(anonymous) @ root.svelte:48
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1105
slot @ chunk-SDAHTBKB.js?v=94465511:1065
_layout @ +layout.svelte:2
(anonymous) @ root.svelte:46
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1153
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
branch @ chunk-WZFGCPRD.js?v=94465511:2288
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:1153
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
block @ chunk-WZFGCPRD.js?v=94465511:2285
component @ chunk-SDAHTBKB.js?v=94465511:1146
(anonymous) @ root.svelte:46
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:525
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
branch @ chunk-WZFGCPRD.js?v=94465511:2288
(anonymous) @ chunk-SDAHTBKB.js?v=94465511:525
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
block @ chunk-WZFGCPRD.js?v=94465511:2285
if_block @ chunk-SDAHTBKB.js?v=94465511:506
Root @ root.svelte:42
(anonymous) @ chunk-WZFGCPRD.js?v=94465511:3093
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
branch @ chunk-WZFGCPRD.js?v=94465511:2288
(anonymous) @ chunk-WZFGCPRD.js?v=94465511:3073
update_reaction @ chunk-WZFGCPRD.js?v=94465511:1053
update_effect @ chunk-WZFGCPRD.js?v=94465511:1144
create_effect @ chunk-WZFGCPRD.js?v=94465511:2156
effect_root @ chunk-WZFGCPRD.js?v=94465511:2230
_mount @ chunk-WZFGCPRD.js?v=94465511:3071
hydrate @ chunk-WZFGCPRD.js?v=94465511:3020
Svelte4Component @ chunk-WZFGCPRD.js?v=94465511:3263
(anonymous) @ chunk-WZFGCPRD.js?v=94465511:3221
initialize @ client.js?v=94465511:447
_hydrate @ client.js?v=94465511:2422
await in _hydrate
(anonymous) @ solitaire:7741
Promise.then
(anonymous) @ solitaire:7740
Show 69 more frames
Show less

System Info

System:
    OS: macOS 14.6.1
    CPU: (11) arm64 Apple M3 Pro
    Memory: 156.55 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
  Browsers:
    Brave Browser: 129.1.70.123
    Safari: 17.6
  npmPackages:
    svelte: ^5.0.0 => 5.1.2

Severity

annoyance

[Ocean-OS]

This appears to be due to the <figure> tag being inside the <p> tag, rather than the <picture> tag. The paragraph element only allows Phrasing Content inside it.

[Ocean-OS]

It would be good if Svelte's compiler understood these content categories, but I'm not completely sure if all content category violations throw errors.

[Ocean-OS]

This appears to be due to the <figure> tag being inside the <p> tag, rather than the <picture> tag. The paragraph element only allows Phrasing Content inside it.

After looking more into this, this doesn't appear to be why an error was thrown.

[brunocalou]

Oh, sorry, it's the <figure> inside the <p> tag that causes the error. I was sleepy when I wrote it.

So, the error only happens when there is a <figure> inside a <p> AND there is a piece of state being rendered on the same file. e.g.

Breaks

<script>
	let theState = $state(true);
</script>

<article>
	<p>
		<figure>
		</figure>
	</p>

	<div>{theState}</div>
</article>

Works

<script>
	let theState = $state(true);
</script>

<article>
	<p>
		<figure>
		</figure>
	</p>

	<!-- <div>{theState}</div> -->
</article>

On Svelte 4, it was not a problem

Works

<script>
	let theState = true;
</script>

<article>
	<p>
		<figure>
		</figure>
	</p>

	<div>{theState}</div>
</article>