<vaadin-confirm-dialog> does not display inner markup in ^24.2.0

[horiavmuntean]

Description

Markup content inside a tag is not shown anymore with "^24.2.0"

Expected outcome

The markup content to be shown as in "^23.2.10"

Minimal reproducible example

To reproduce the issue, here is the repo: https://github.com/horiavmuntean/test ; just create a codespace on it, then "npm install & npm run dev"

Steps to reproduce

There are two branches, main with "@vaadin/vaadin": "^24.2.0" that does not work and 'working' with "@vaadin/vaadin": "^23.2.10" that is obviously 'working'; any pointers/help would be appreciated

Environment

Vaadin version(s): 24.2.0 OS: github

Browsers

No response

[sissbruecker]

Worth noting that this is a Svelte project. The issue seems to be that the confirm dialog component will only show the child nodes that were present at the time when it was added to the DOM, it does not keep watching its child nodes for future changes. That is a problem with Svelte as it first adds the dialog to the DOM, and only after that renders the content into it. I guess the component has been changed in 24 in that watching child nodes for changes has been removed, or some other change has introduced a timing issue.

[tomivirkki]

Confirm dialog should be refactored to not teleport user-defined content and instead use a renderer function like the regular dialog does.

Here's a hacky workaround for the issue (not recommended to long-term use):

import { onMount } from 'svelte';

let datePicker;
onMount(() => {
  const confirmDialog = datePicker.parentElement;
  confirmDialog._messageNodes = [...confirmDialog._messageNodes, datePicker];
});

<vaadin-date-picker bind:this={datePicker}

https://github.com/vaadin/web-components/assets/1222264/6c5a9f59-e1d4-469b-94d1-d2da78044afa