Svelte 5: Undocumented breaking changes

[Conduitry]

Describe the bug

There are a number of breaking changes that have not made their way into the official list of breaking changes yet. I'm creating this issue to track them. Maintainers: Edit this post as we come across new ones, and check them off as we have PRs documenting them.

• breaking: preserve slots inside templates with a shadowrootmode attribute #10721
• breaking: don't allow children in svelte:options #11250
• Svelte 5: Nested form control bindings causes runtime error #11941

Reproduction

https://svelte-5-preview.vercel.app/docs/breaking-changes

Logs

No response

System Info

-

Severity

annoyance

[GauBen]

Hey there, found one in #11302: <!-- svelte-ignore --> tokens are now written with underscores rather than dashes.

• Before: <!-- svelte-ignore a11y-mouse-events-have-key-events a11y-no-static-element-interactions -->
• After: <!-- svelte-ignore a11y_mouse_events_have_key_events a11y_no_static_element_interactions -->

It is succinctly mentioned in https://svelte-5-preview.vercel.app/docs/breaking-changes#other-breaking-changes-renames-of-various-error-warning-codes

[frederikhors]

@Conduitry I would add what I mentioned here: #11431.

[Conduitry]

Changes that only occur in runes mode are not the sort of changes we're concerned with here. Breaking changes are instances where a user upgrades from Svelte 4 to Svelte 5 and their existing component starts to behave differently.

[paoloricciuti]

Should we add that props are immutable by default in runes mode?

[Conduitry]

Again, no, not for the purposes of documenting what the breaking changes are for people who try to use their components as-is when upgrading from Svelte 4 to Svelte 5.

[frederikhors]

@Conduitry I'm talking about:

In Svelte 4 app I was using:

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player />
{/each}

Now with Svelte 5 it errors with:

Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)

Why?

Should I use the below instead?

{#each players || [] as player, i}
    <FormPlayer index={i} bind:player={players[i]} />
{/each}

Also if I use the latter one player is unused and I get the ts warning:

'player' is declared but its value is never read. ts(6133)

Plus, with the latter one I get another typscript warning:

'players' is possibly 'null' or 'undefined'. ts(18049)

even if I'm already inside an {#each players.

There is no docs on this on https://svelte-5-preview.vercel.app/docs, right?

[rootext]

Hi,
I tried to migrate my small application to Svelte 5 as I like new features a lot.
However I have an issue with one pattern I use.
Here is an example:
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo1Sy27jMAz8FVZ7SAIY8j2xDfS02B_YS52DYjGpUlkyJLkPGPr3glITO21R9GDIpDhDzogTOyqNnm0fJmZEj2zL7oeBFSy8DRT4Z9QBWcG8HV1Hmcp3Tg2haU0bVD9YF2CCv86OQwH_AvYQ4ehsDy3jZW8lan72LVtU_1f4MpdQxHOXXEWfxgAnooQaDL5k-vVm1xq67azxAYSUUMN6A3UDUwKGBOEqYO-hhgfO-SJTJCaacL2ixGqzJ1RsTVXOkkx1GEOwBqzZdlp1T_UkpIyNkLIq81VTHVzZtGb6g6J7hGVT4YF-IhFXSeeUYiivoJJAkRWst1IdFUq2DW7EWFz9J9xvHwBfk6XkFzW6MSjY00njZ4-ojKMRB43k390y3n1nSFLAabYIymdBF0D8zq_cNzb5vLrWmp9Ep02ZVZ_9UvGHyk4L7_MuZDVJpxu7YN16cxEYHpWfd2B_0URvYm6I0rJ-4aF5oIbV6pbwI03HbpGejTwK7fHa7KvUfXwHF57u2WsDAAA=

After click on 'MIGRATE' items aren't rendered anymore. Some people say it isn't usual way Svelte application are implemented but it works with current version perfectly.
To my mind it's a breaking change. My expectation is that I can replace top level let with $state rune and rest of the code should work unchanged.

[theetrain]

I recommend including "different handling of nested CSS" as part of breaking changes. Svelte 5 makes use of :where() for nested selectors (for both Runes and non-Runes modes) while Svelte 4 does not.

• Svelte 4 demo, broken with nested CSS: https://svelte.dev/repl/62f6ff213af145f1b838d876b02d91ec?version=4.2.16
• Svelte 4 demo, solved without nested CSS: https://svelte.dev/repl/43b193a3ce5c471dbc588fcd0f5b44f9?version=4.2.16
• Svelte 5 demo, works with nested CSS (non-runes): repl link

Source code for Svelte 5 (for posterity)

<div class="rotator">
	Test
</div>

<style>
.rotator {
	width: 60px;
	height: 60px;
	border-radius: 60px;
	overflow: hidden;
	position: absolute;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	overflow: hidden;
	z-index: 0;

	&::before {
		content: '';
		position: absolute;
		z-index: -2;
		left: -50%;
		top: -50%;
		width: 200%;
		height: 200%;
		background-color: white;
		background-repeat: no-repeat;
		background-size: 50% 50%, 50% 50%;
		background-position: 0 0, 100% 0, 100% 100%, 0 100%;
		background-image: linear-gradient(white, white), linear-gradient(black, black), linear-gradient(white, white), linear-gradient(black, black);
		animation: rotate 4s linear infinite;
	}

	&::after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 4px;
		top: 4px;
		width: calc(100% - 8px);
		height: calc(100% - 8px);
		background: gray;
		border-radius: 50px;
	}
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}
</style>

Related Discord discussion. https://discord.com/channels/457912077277855764/1239363150139228160

[FoHoOV]

I believe #11590 is a breaking change that's not clearly mentioned in docs because of how the reactivity system works now.

[7nik]

@theetrain, how can it be a breaking change if it never worked in Svelte 4? Though it can listed in the new Svelte 5 features.

@FoHoOV, this thread is about breaking changes in Svelte 5's Legacy (non-rune) mode compared to Svelte 4. #11590 is about rune mode, so it is unrelated to this thread.