fix: run render functions for dynamic void elements (#11258)

* fix: run render functions for dynamic void elements

* Update packages/svelte/src/internal/client/dom/blocks/svelte-element.js

.changeset/fifty-masks-give.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: run render functions for dynamic void elements

packages/svelte/src/internal/client/dom/blocks/svelte-element.js

@@ -40,7 +40,7 @@ function swap_block_dom(effect, from, to) {
  * @param {Comment} anchor
  * @param {() => string} get_tag
  * @param {boolean} is_svg
- * @param {undefined | ((element: Element, anchor: Node) => void)} render_fn,
+ * @param {undefined | ((element: Element, anchor: Node | null) => void)} render_fn,
  * @param {undefined | (() => string)} get_namespace
  * @returns {void}
  */
@@ -115,13 +115,11 @@ export function element(anchor, get_tag, is_svg, render_fn, get_namespace) {
 							? element.firstChild && hydrate_anchor(/** @type {Comment} */ (element.firstChild))
 							: element.appendChild(empty());
 
-						if (child_anchor) {
+						// `child_anchor` is undefined if this is a void element, but we still
-							// `child_anchor` can be undefined if this is a void element with children,
+						// need to call `render_fn` in order to run actions etc. If the element
-							// i.e. `<svelte:element this={"hr"}>...</svelte:element>`. This is
+						// contains children, it's a user error (which is warned on elsewhere)
-							// user error, but we warn on it elsewhere (in dev) so here we just
+						// and the DOM will be silently discarded
-							// silently ignore it
+						render_fn(element, child_anchor);
-							render_fn(element, child_anchor);
-						}
 					}
 
 					anchor.before(element);

packages/svelte/tests/runtime-runes/samples/action-void-element/_config.js

@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<input><input>`,
+
+	async test({ assert, target }) {
+		const inputs = target.querySelectorAll('input');
+		assert.equal(inputs[0].value, 'set from action');
+		assert.equal(inputs[1].value, 'set from action');
+	}
+});

packages/svelte/tests/runtime-runes/samples/action-void-element/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	/** @param {HTMLInputElement} node */
+	function action(node) {
+		node.value = 'set from action';
+	}
+</script>
+
+<input use:action>
+<svelte:element this={'input'} use:action />