Dynamically change between primary and secondary panes

[Thuhaa]

I want dynamically change between the primary and secondary panes. I can't seem to be able to do that while maintaining the content in my components.

Using if else statements works, but it will re-render the components, which is not what I want, as I want to maintain the state, but switch the positions of the panes.

svelte has a limitation in that I can't really use dynamic slot naming, something like <div slot={slotPos === 'left' ? 'primary' : 'secondary'}></div> will not work.

Please show me how this can be done.

[GeoffCox]

@Thuhaa I would have the split with divs that have primary and secondary and not change them. Instead, I would use the svelte:component technique to swap in the content into either the primary or secondary pane.

https://svelte.dev/tutorial/svelte-component provides an example of how to use svelte:component. This allows you to choose a component to render via the script rather than trying to wrestle the #if limitations.