Make it possible to animate an initially open dialog

[nip3o]

If a Dialog initially has the open attribute set when rendered, no opening animation will be shown. However, it would be useful to be able to open a Dialog by adding it to the DOM with the open attribute set. In this case we would want the opening animation to be shown.

In this codepen we add the Dialog element as open after the page has loaded, and therefore the opening animation is not shown. In a more realistic use-case we might render the Dialog on the server, and then inject it into the DOM using either something like HTMX. Currently we would have to first render the Dialog without open, then use Javascript to open it as soon as the dialog has been initialized in order to make the opening animation work.

I think it would be useful to add a new attribute to achieve this. Another option would be to always run the open-animation when the Dialog is added to the DOM, but I can imagine some use-cases where you do not want this to happen (for example on initial page load).

What are your thoughts about this?

[claviska]

The current behavior where the dialog shows instantly if open is provided initially is intentional. The animation is part of the transition from closed to open so, to modify it, we'd be rendering it in the wrong state and immediately changing the state, which feels like the wrong thing to do.

[nip3o]

Yeah i see your point. We ended up creating out own custom component that inherits from SlDialog and added an auto-open attribute that calls this.show() in firstUpdated, and also removes itself from DOM once closed. It was pretty straightforward to do, so for anyone who has the same problem in the future that is a viable path.

[claviska]

Instead of wrapping/extending, I'd probably do something like this instead.

<sl-dialog label="Dialog" class="dialog-overview" data-open-initially>
  ...
</sl-dialog>

<script type="module">
  await customElements.whenDefined('sl-dialog');

  // Show dialogs on load with animation
  document.querySelectorAll('sl-dialog[data-open-initially]').forEach(async dialog => {
    await dialog.updateComplete;
    dialog.show();
  });  
</script>