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.

[annekekleppe]

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:375

System 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.7

Severity

blocking an upgrade

[dummdidumm]

The "CSS not visible" part happens because you're using the element as a custom element but didn't turn on customElement: true in the compiler option, which means CSS is not bundled via JavaScript into the component. Turn on customElement: true or add css="injected" to your <svelte:options /> element for that.

The hydration error is a bug which I'm looking into now.

[annekekleppe]

Thanks for the fix. However, when I try to run my own code in the revised playground (https://svelte.dev/playground/hello-world?version=pr-15217), it is getting stuck. Errors:
ReferenceError: svelte is not defined
index-BBii3iCS.js:88:899
Error: Could not fetch tarball

Furthermore, with every change I need to reload the page, because "CustomElementRegistry.define: 'my-stepper' has already been defined as a custom element". Not a bug, but a nuisance!

And the latter made me wonder if there would be any problems with having multiple 'my-stepper' components in my code. Is there a way to create multiple instances of this custom component?

By the way, searching the internet I have found that many people simple create their own dispatch function, which seems to work fine. Why are these strange custom components in Svelte 5? They seem to stick out like dogpoop on a perfect lawn.

Thanks for all the work. We have been very happy with all the previous versions of Svelte and Sveltekit.

[dummdidumm]

ReferenceError: svelte is not defined

The PR version is only temporarily available, it's deleted upon merge. It's released now so you should be able to use it now.

"CustomElementRegistry.define: 'my-stepper' has already been defined as a custom element"

Mhm that is true, it would be good if we could tell the playground to hard-reload in that case, or reuse the HMR code we have for local dev which handles that case

By the way, searching the internet I have found that many people simple create their own dispatch function, which seems to work fine. Why are these strange custom components in Svelte 5?

Could you elaborate on what you mean by that? Do you mean that createEventDispatcher was deprecated?

[annekekleppe]

Well, the main question is why a component that dispatches an event is so much different from the other components.

First, the naming of the component is non-standard:

• The component does not use the standard name as expected from the file Stepper.svelte.
• The import statement is different from the default: import ./Stepper.svelte vs import Stepper from ./Stepper.svelte
• I have to adhere to a naming scheme (lower-case, with a hyphen in it) for which, as a user, I cannot see the reason .
  All of this breaks the elegance of the system, and it makes maintenance more difficult, because I have to be searching for this name in the first line of the component, instead of simply looking for its file name. And what if I have used a normal component say 10 times, and decide that it needs to dispatch an event? I have to adjust all 10 instances where I have used this component to start using its custom name. (By the way, the question whether there would be any problems with having multiple 'my-stepper' components, is not answered yet. Is this just a playground issue?)

Second, if a simple dispatch function (be it createEventDispatcher as in Svelte 4 or another) does the trick, then why does Svelte 5 need this special type of component? This is really much more complex and harder to understand than custom events in Svelte 4.
I will be trying to avoid using custom components, even if that means that I have to rewrite parts of my code.

Last, the use of $host() feels like magic, what is this host element? And why would I need it?

Again, we have been very happy with Svelte. From when we choose it over React some six years ago, we never had anything to complain. It is simple but powerful, and has a low threshold for newbies.

[paoloricciuti]

Well, the main question is why a component that dispatches an event is so much different from the other components.

First, the naming of the component is non-standard:

• The component does not use the standard name as expected from the file Stepper.svelte.
• The import statement is different from the default: import ./Stepper.svelte vs import Stepper from ./Stepper.svelte
• I have to adhere to a naming scheme (lower-case, with a hyphen in it) for which, as a user, I cannot see the reason .
  All of this breaks the elegance of the system, and it makes maintenance more difficult, because I have to be searching for this name in the first line of the component, instead of simply looking for its file name. And what if I have used a normal component say 10 times, and decide that it needs to dispatch an event? I have to adjust all 10 instances where I have used this component to start using its custom name. (By the way, the question whether there would be any problems with having multiple 'my-stepper' components, is not answered yet. Is this just a playground issue?)

Second, if a simple dispatch function (be it createEventDispatcher as in Svelte 4 or another) does the trick, then why does Svelte 5 need this special type of component? This is really much more complex and harder to understand than custom events in Svelte 4. I will be trying to avoid using custom components, even if that means that I have to rewrite parts of my code.

Last, the use of $host() feels like magic, what is this host element? And why would I need it?

Again, we have been very happy with Svelte. From when we choose it over React some six years ago, we never had anything to complain. It is simple but powerful, and has a low threshold for newbies.

$host is not for a component that dispatch an event...is for components that are compiled as web components. And they are indeed different from a normal svelte component because instead of importing them and using them as svelte components you import them and that register a custom element with the tag you specify globally...you can then use your component in normal html with <my-element />.

If your only goal is to emit an event in svelte 5 there's no such thing because events in the browser are emitted on an element and a component might not even have an element (which is why svelte had the createEventDispatcher dance...however, why can't you just accept a prop which is a function and call that?

[dummdidumm]

I second that - originally it sounded like you do want to author custom elements, but now you complain about authoring custom elements - I mean, that's just the trade-off of using them.

If you only want to expose some components as custom elements, and use other Svelte components within them, then just use them as regular Svelte components.

If you think you have to use custom elements because you want to keep using createEventDispatcher, then that's wrong. Your can keep using createEventDispatcher for now, but should migrate towards callback props eventually. https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes

[annekekleppe]

$host is not for a component that dispatch an event…

� Yes, found that out last week. I took a wrong turn in migrating createEventDispatcher because when searching for CustomEvent on svelte.dev the $host page was the top hit. That was when I found and reported the above bug. Currently, I am rewriting my code in another way. Svelte 5 is indeed a breaking change. The rewrite takes a lot of effort. � There will of course be reasons to implement custom components as is, but from a user’s point of view, it does not fit in very well. Sorry, that is just how I find it. From: Paolo Ricciuti ***@***.***> Sent: Friday, February 7, 2025 10:26 AM To: sveltejs/svelte ***@***.***> Cc: annekekleppe ***@***.***>; Author ***@***.***> Subject: Re: [sveltejs/svelte] 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. (Issue #15213) � Well, the main question is why a component that dispatches an event is so much different from the other components. First, the naming of the component is non-standard: * The component does not use the standard name as expected from the file Stepper.svelte. * The import statement is different from the default: import ./Stepper.svelte vs import Stepper from ./Stepper.svelte * I have to adhere to a naming scheme (lower-case, with a hyphen in it) for which, as a user, I cannot see the reason . All of this breaks the elegance of the system, and it makes maintenance more difficult, because I have to be searching for this name in the first line of the component, instead of simply looking for its file name. And what if I have used a normal component say 10 times, and decide that it needs to dispatch an event? I have to adjust all 10 instances where I have used this component to start using its custom name. (By the way, the question whether there would be any problems with having multiple 'my-stepper' components, is not answered yet. Is this just a playground issue?) Second, if a simple dispatch function (be it createEventDispatcher as in Svelte 4 or another) does the trick, then why does Svelte 5 need this special type of component? This is really much more complex and harder to understand than custom events in Svelte 4. I will be trying to avoid using custom components, even if that means that I have to rewrite parts of my code. Last, the use of $host() feels like magic, what is this host element? And why would I need it? Again, we have been very happy with Svelte. From when we choose it over React some six years ago, we never had anything to complain. It is simple but powerful, and has a low threshold for newbies. $host is not for a component that dispatch an event...is for components that are compiled as web components. And they are indeed different from a normal svelte component because instead of importing them and using them as svelte components you import them and that register a custom element with the tag you specify globally...you can then use your component in normal html with <my-element />. If your only goal is to emit an event in svelte 5 there's no such thing because events in the browser are emitted on an element and a component might not even have an element (which is why svelte had the createEventDispatcher dance...however, why can't you just accept a prop which is a function and call that? — Reply to this email directly, view it on GitHub <#15213 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEFEVK5LOBKWNEKENDDFDKL2OR34LAVCNFSM6AAAAABWQURCCWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNBSGM4TSMBTHE> . You are receiving this because you authored the thread. <https://github.com/notifications/beacon/AEFEVK2ZA4SVUNXTXRHSC532OR34LA5CNFSM6AAAAABWQURCCWWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTU5P7HT6.gif> Message ID: ***@***.*** ***@***.***> >