When a second prop is added to a component that uses $host, the component is no longer shown, and styling the component does not work. #15213
Description
Describe the bug
In the process of migrating from svelte 4 to 5, I noticed that when a second prop is added to a component that uses $host, the component is no longer shown.
Example code can be found in https://github.com/annekekleppe/svelte5-host-demo-extended. I have taken a clean Sveltekit project(branch master), recreated the example from the documentations site (https://svelte.dev/docs/svelte/$host) in branch demo, added some elements that we need in our actual code (branch custom-event-detail). So far, everthing works as expected.
The next change I wanted to make is to do some styling in the Stepper component. No styling from the <style>-part has any effect. I have also tried this in the repl, and there the same error occurs.
Another, even more devastating, error is that when I add a second prop to the Stepper component, the page crashes. This code can be found in branch startId-added.
Reproduction
https://github.com/annekekleppe/svelte5-host-demo-extended
Logs
Uncaught (in promise) DOMException: Node.appendChild: Cannot add children to a Text
child operations.js:106
Stepper Stepper.svelte:58
e each.js:551
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
create_item each.js:551
each each.js:198
update_reaction runtime.js:423
update_effect runtime.js:575
process_effects runtime.js:807
flush_queued_root_effects runtime.js:681
flush_sync runtime.js:875
set options Stepper.svelte:78
set legacy-client.js:137
set custom-element.js:317
set_custom_element_data attributes.js:232
_page +page.svelte:34
effect2 hmr.js:47
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
wrapper hmr.js:38
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
block effects.js:367
wrapper hmr.js:28
children root.svelte:94
effect2 svelte-component.js:36
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
component svelte-component.js:36
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
block effects.js:367
component svelte-component.js:27
children root.svelte:92
wrap_snippet snippet.js:68
snippet_effect snippet.js:48
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
snippet snippet.js:48
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
block effects.js:367
snippet snippet.js:36
Layout layout.svelte:15
effect2 hmr.js:47
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
wrapper hmr.js:38
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
block effects.js:367
wrapper hmr.js:28
consequent root.svelte:81
effect2 svelte-component.js:36
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
component svelte-component.js:36
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
block effects.js:367
component svelte-component.js:27
consequent root.svelte:79
consequent_effect if.js:72
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375
update_branch if.js:72
set_branch if.js:42
Root root.svelte:45
if_block if.js:102
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
block effects.js:367
if_block if.js:100
Root root.svelte:145
effect2 hmr.js:47
update_reaction runtime.js:423
update_effect runtime.js:575
create_effect effects.js:125
branch effects.js:375System Info
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 19.02 GB / 31.71 GB
Binaries:
Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 122.0.6261.129
Edge: Chromium (132.0.2957.140)
Internet Explorer: 11.0.26100.1882
npmPackages:
svelte: ^5.0.0 => 5.19.7Severity
blocking an upgrade