fix: enable local transitions on `svelte:element` (#12346)

fixes #12231

.changeset/wild-cows-chew.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: enable local transitions on `svelte:element`

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

@@ -14,6 +14,7 @@ import { current_component_context, current_effect } from '../../runtime.js';
 import { DEV } from 'esm-env';
 import { assign_nodes } from '../template.js';
 import { noop } from '../../../shared/utils.js';
+import { EFFECT_TRANSPARENT } from '../../constants.js';
 
 /**
  * @param {Comment | Element} node
@@ -135,5 +136,5 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 		// Inert effects are proactively detached from the effect tree. Returning a noop
 		// teardown function is an easy way to ensure that this is not discarded
 		return noop;
-	});
+	}, EFFECT_TRANSPARENT);
 }

packages/svelte/tests/runtime-runes/samples/dynamic-element-transition/_config.js

@@ -0,0 +1,21 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	async test({ assert, target, raf }) {
+		const btn = target.querySelector('button');
+
+		raf.tick(0);
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Toggle</button> <div style="opacity: 0;">DIV</div>`
+		);
+
+		raf.tick(100);
+
+		assert.htmlEqual(target.innerHTML, `<button>Toggle</button> <div style="">DIV</div>`);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-element-transition/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { fade } from 'svelte/transition';
+
+	let element = $state('div');
+	let show = $state(false);
+</script>
+
+<button onclick={() => (show = !show)}>Toggle</button>
+
+{#if show}
+	<svelte:element this={element} transition:fade={{ duration: 100 }}>DIV</svelte:element>
+{/if}