Better HTMLDialogElement support for transitions

[danielniccoli]

Describe the problem

I've been trying to implement HTMLDialogElements with their native APIs. Adding transitions was a frustrating experience.

This is a minimal working example, without transitions. It uses no Svelte, only the native HTMLDialogElement API: showModal() displays the modal with its backdrop. close() and cancel() close the dialog. The element's methods also take care of all ARIA roles, focus and other accessibility tools. The backdrop can be styled with the dialog' s ::backdrop pseudo-class.

Problem

• It cannot use Svelte transition or easing because in:, out:, fade:, etc., all rely on the addition/removal from the DOM. This is incompatible to the HTMLDialogElement API, as the element must remain in the DOM at all times, or you must do a full implementation, which defeats the purpose of the feature-rich HTMLDialogElement.

Describe the proposed solution

If Svelte would support transitions of elements between the display:none and other display states, and also apply them to the backdrop pseudo-class, most if not all of these problems would be solved (including the problems with the alternative solutions below)

Alternatives considered

This is a minimal example fo the workaround. By using an if-condition we remove the HTMLDialogElement from the DOM. An additional variable (e.g., visible) is used to remember if the dialogs visibility. We also have to implement a custom showModal() and closeModal() that changes not only the dialogs state, but also the independently managed visibility. Then we have to export the custom showModal() to the parent, resulting in an additional variable. All together that is quite a jump in complexity. Now we can add a transition to the dialog and it will work, because the element is actually removed and re-added to the DOM.

Problem

• The transition is applied only to the modal, not to the backdrop.
• The transition is janky. It is not applied correctly every time. Sometimes the transition is applied twice or more times resulting in flickering.
• Enormous complexity requiring manual implementations of some native HTMLDialogFeatures.

Importance

would make my life easier

[danielniccoli]

Related: #4723

[msf-caesar]

Try with using CSS transitions and animations to achieve the desired effects on the HTMLDialogElement and its backdrop. Apply the necessary CSS properties and values to create smooth transitions between display states, and use keyframes to define custom animations. Make sure to include the necessary selectors and pseudo-classes to target the specific elements that need the transitions.

[danielniccoli]

I was not asking for a workaround, but thanks for proving my point.