Synthetic shadow + duplicate slots + slot forwarding: Failed to execute 'removeChild' on 'Node'

[nolanlawson]

Somewhat related to #4446.

It turns out that slot forwarding is buggy in synthetic shadow DOM when using synthetic custom element lifecycle.

Minimal StackBlitz repro

If you look in the DevTools console, you'll see an unhandled promise rejection:

Unhandled promise rejection: NotFoundError: Failed to execute 'removeChild' on 'Node':
The node to be removed is not a child of this node.

This is caused by this line:

lwc/packages/@lwc/engine-core/src/framework/rendering.ts

Line 569 in 9d207fb

renderer.remove(node, parent);

Specifically when called in unmount:

lwc/packages/@lwc/engine-core/src/framework/rendering.ts

Lines 464 to 468 in 9d207fb

	if (doRemove && type !== VNodeType.Fragment) {
	// The vnode might or might not have a data.renderer associated to it
	// but the removal used here is from the owner instead.
	removeNode(elm!, parent, renderer);
	}

This bug repros only in synthetic shadow, not native shadow. It repros with both native and synthetic custom element lifecycle.

The bug goes back to LWC v3.0.0 (at least), so it's probably been there for a while.

This is also repro'd by 5035243 and this test for #3827:

lwc/packages/@lwc/integration-karma/test/rendering/callback-invocation-order/index.spec.js

Lines 373 to 374 in 9d207fb

	fixtures.forEach(({ fixtureName, tagName, ctor, ifBlock, elseBlock, elseIfBlock }) => {
	// #TODO[3827]: These regression tests can be removed once the bug is resolved.

The best way to repro is to run DISABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE=1 yarn start and look in the DevTools console.