The new child element contains the parent.

REPL

I have one component that should conditionally wrap another component (one it’s an app, the other is something like a mockup for better visuals).

I was initializing them like:

	const appContainer = document.createElement('DIV')
    new App({ target: appContainer })
    new POS({
      target: root,
      slots: {
        default: appContainer,
      },
    })

And started receiving the error: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

However, if you replace the createElement with a createDocumentFragment it works 100%.

[kaisermann]

@ekhaled I see! Thank you so much for your insights 😁

[ekhaled]

Programmatic slots are not a public api. Svelte uses either appendNode or insertNode depending on whether it has to render slot content conditionally.

In OP’s case… if you set the condition to be true to start with (in Machine.html’s data), you will notice that it works perfectly.

Fortunately, using a fragment works for both insertNode and appendNode