Create svelte component on every click

Question

I'm trying to create new instances of the same component in svelte whenever a button or other action happens on the page, without having to make a list and {each} over them. I just want to do something like new Component(some context data) and forget. Another concern is I don't want the component to disappear when the parent is removed.

Thank you

brunnerh · Accepted Answer · 2022-07-03 18:57:21Z

2

Just mount it straight on the document.body:

new Component({ target: document.body })

But be aware that if you do not $destroy it yourself, you will end up with a memory leak.

When I do something like this, e.g. for notifications, I dispatch an event from the component that tells the calling code when the component can safely be destroyed. Something like:

const notification = new Notification({ target: document.body, ... });
notification.$on('close', () => notification.$destroy());

answered Jul 3, 2022 at 18:57

brunnerh

188k30 gold badges362 silver badges434 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

LAZ Over a year ago

This seems to be exactly what I need, I'm just wondering what happens when say the caller (parent) no longer exists when the event is fired, does it still destroy / clean up ? Edit: my guess is yes, since the event is set to the notif itself right?

brunnerh Over a year ago

@LAZ: This will work without issue (REPL example).

LAZ Over a year ago

Oh, last thing, now that I've made a helper func to handle this behavior, I'm having trouble passing elements for the slots in the components. I know how to pass props, but nothing else really

brunnerh Over a year ago

Slots in the client-side API are currently not supported, there is a Github issues about that somewhere. I would probably just bind an element within the instantiated component and append to that instead. To access props directly, the component needs to be compiled with <svelte:options accessors />. (REPL example)

LAZ Over a year ago

Ok thank you. I passed components as props and used <svelte:component> to instantiate them, works well enough for my needs.

Collectives™ on Stack Overflow

Create svelte component on every click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related