fix hydrating top level content

[tanhauhau]

Fixes #4542

Explanation: #4542 (comment)

[Conduitry]

The node claiming process doesn't result in the DOM using any of the same nodes as it initially had (which would then get removed by nodes.forEach(detach))?

[tanhauhau]

The node claiming process doesn't result in the DOM using any of the same nodes as it initially had (which would then get removed by nodes.forEach(detach))?

Not sure I get the question.. yes we need to remove nodes in the initial DOM that are not claimed.

[Conduitry]

What I meant was wouldn't the claimed nodes still be there in the nodes array, and that we wouldn't actually want to remove them after claiming?

[tanhauhau]

oh, when we found a match in the nodes array, we removed them, see

nodes.splice(i, 1)[0];

in

svelte/src/runtime/internal/dom.ts

Lines 151 to 166 in a66437b

	export function claim_element(nodes, name, attributes, svg) {
	for (let i = 0; i < nodes.length; i += 1) {
	const node = nodes[i];
	if (node.nodeName === name) {
	let j = 0;
	while (j < node.attributes.length) {
	const attribute = node.attributes[j];
	if (attributes[attribute.name]) {
	j++;
	} else {
	node.removeAttribute(attribute.name);
	}
	}
	return nodes.splice(i, 1)[0];
	}
	}

[Conduitry]

Ah gotcha, I hadn't noticed that during the claim, the array gets mutated. Thanks.