only run render effect for children of non-void <svelte:element>

[Rich-Harris]

I don't know if this is a good idea or not, but I encountered it while looking at the hydrate_block_anchor function:

svelte/packages/svelte/src/internal/client/dom/hydration.js

Lines 79 to 98 in fe7c45b

	export function hydrate_block_anchor(node) {
	if (!hydrating) return;
	if (node.nodeType === 8) {
	// @ts-ignore
	let fragment = node.$$fragment;
	if (fragment === undefined) {
	fragment = get_hydration_fragment(node);
	} else {
	schedule_task(() => {
	// @ts-expect-error clean up memory
	node.$$fragment = undefined;
	});
	}
	set_current_hydration_fragment(fragment);
	} else {
	const first_child = /** @type {Element | null} */ (node.firstChild);
	set_current_hydration_fragment(first_child === null ? [] : [first_child]);
	}
	}

In all but 5 tests, anchor is a Comment. 3 of those tests relate to this...

<svelte:element this={somethingvoid}>
  <p>invalid children (because this is a void element)</p>
</svelte:element>

...and if we can avoid creating the children for these elements then there'll only be 2 tests where anchor isn't a Comment, and if we can figure out those edge cases then maybe we can simplify that function by enforcing that its argument is always a Comment. Fewer if branches makes everything more understandable, and every microsecond counts during hydration.

It turns out we can determine which elements are void by checking to see if element.outerHTML contains a solidus (/). Admittedly, this trades work in one place for work in another. Just putting it up for discussion for now.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0a6b14e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[trueadm]

Hoist nodeName into a var

[trueadm]

Can we be certain about the outerHTML trick? Are there any false positives that might come about from this at all? This SO recommends >< https://stackoverflow.com/questions/27786815/how-can-i-test-if-an-element-is-self-enclosed-in-javascript

[Rich-Harris]

I think >< and / are equivalent. I can't imagine why there'd be any false positives.

Either way, I worked around this in #10891 by skipping the child render function if child_anchor is undefined, which would only be the case if hydrating a void dynamic element. It means that child content of void elements would still be 'rendered' when not hydrating, but that probably doesn't matter.

[Rich-Harris]

I'm going to close this since there's a sensible workaround and it's a sufficiently rare case to not worry about