diff --git a/.changeset/wild-cows-chew.md b/.changeset/wild-cows-chew.md new file mode 100644 index 0000000000..55e5163e7b --- /dev/null +++ b/.changeset/wild-cows-chew.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: enable local transitions on `svelte:element` diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js index b216ea506c..f966ac7fa6 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js +++ b/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); } diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-transition/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-element-transition/_config.js new file mode 100644 index 0000000000..8c0ebf93e3 --- /dev/null +++ b/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, + `