From 79b721a8dcdb08e263cf8d08f0501f9048d3b4df Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Mon, 16 Dec 2024 13:21:20 +0100 Subject: [PATCH] make dom target variant less confusing to the user --- .../internal/client/dom/blocks/svelte-portal.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js b/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js index ed01c9f853..6f690aa063 100644 --- a/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js +++ b/packages/svelte/src/internal/client/dom/blocks/svelte-portal.js @@ -62,9 +62,19 @@ export function portal(target, content) { let previous_hydrating = false; let previous_hydrate_node = null; - // TODO right now the portal is rendered before the given anchor. Is that confusing for people and they'd rather have it as - // the first child _inside_ the anchor if the anchor is an element? - var anchor = is_dom_node ? target : portal.anchor; + + /** @type {TemplateNode} */ + var anchor; + if (is_dom_node) { + // Our rendering logic always prepends elements to the anchor. To not confuse users, + // adjust the anchor such that the content is portaled _into_ the target. + anchor = /** @type {TemplateNode} */ (/** @type {Element} */ (target).firstChild); + if (!anchor) { + target.appendChild((anchor = document.createTextNode(''))); + } + } else { + anchor = portal.anchor; + } if (hydrating) { previous_hydrating = true;