How does the <dialog> tag work? Does it have a future?

Question

Some time ago, reading some articles on HTML5, I learned about the existence of the tag <dialog>.

I was curious to know how it works, because currently when it comes to dialogues (also known as "modals") are almost always done by hand or with third party library. Maybe it would be nice to have something standardized about the dialogue of a site.

Example (only works in Chrome)

(function() {
  var updateButton = document.getElementById('updateDetails');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('favDialog');

  // Update button opens a modal dialog
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // Form cancel button closes the dialog box
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();

<!-- esse exemplo foi tirado da MDN e creio que só vai funcionar no Google Chrome -->
<dialog open id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

I’d like to know:

• What is the purpose and how the tag works <dialog>?
• What is the compatibility of this tag?
• This tag has a future?

_{I believe it’s been a while since I’ve seen that this tag exists, but even today (2017) it seems to me that it is flagged as having support only in Google Chrome, besides appearing quite unpopular.}

Answer 1

The element <dialog>, of HTML 5, together with the elements <details> and <summary>, is characterized, in the W3C specifications and in WHATWG, as an interactive element, W3C session 4.11.3 and WHATWG session 4.11.4.

At the top of this same file is the text:

The following Features are at risk and may be Removed due to Lack of implementation.

• <dialog>
• <details> and <summary>

Which indicates that the future of these elements may be compromised. It is not clear, either in the specifications or in the browser documentation, what are the risks that these elements cause and whether this is the real reason why they have not developed support for such.

It came up in HTML 5 and has a word that sums up this whole version: semantics. As you well described in the question, today the modal windows are created from elements that were not designed for this, which require Javascript and CSS help to possess the desired behavior. Recently both the W3C and the WHATWG began to incriminate these things, because it affects the semantics of the document. Thus, they defined the tag <dialog> precisely to create modal windows natively, only with HTML, using JS only to control their display, through events on the page, usually.

After the introduction, we go to the questions:

What is the purpose and how the tag works <dialog>?

As commented, the tag dialog> was specified precisely in order to allow the use of modal windows natively, without relying on libraries for this. Something along the way seems to have gone wrong and browsers have not developed support for it. How it works?

How it works?

The element <dialog> is a fluid element and supports any fluid content. Supports all global attributes plus the attribute open, that defines when the dialog window should be displayed.

Your DOM interface is:

[Exposed=Window,
 HTMLConstructor]
interface HTMLDialogElement : HTMLElement {
  [CEReactions] attribute boolean open;
  attribute DOMString returnValue;
  [CEReactions] void show();
  [CEReactions] void showModal();
  [CEReactions] void close(optional DOMString returnValue);
};

The attribute open is of the boolean type and, when specified, indicates that the dialog window is active and that the user can interact with it. When omitted, the dialog window should not be displayed to the user.

Note: omitting the attribute open habitually conceal the dialogue window, but, in doing so, pay attention to the consequences:

• The event close will not be fired;
• The method close(), along with any other cancellation method provided by the user agent, will no longer have the power to close the window;
• If the window is displayed by the method showModal(), the document will continue blocked.

For these reasons, it will virtually never be recommended to remove the attribute open manually; always close the window method close().

^{Note removed and translated from the WHATWG specification.}

The attribute tabindex should never be specified for the element, as when opened it will block the document, being the only element to be interacted with (because all elements of the document become inert) and, when hidden, should not be part of the navigation.

About the methods of the element in the DOM< we have:

• dialog.show(): Displays the dialog window;
• dialog.showModal(): displays the dialog window in modal form, superimposing all content¹;
• dialog.close([returnValue]): hides the element and, if you have an argument, you will have its value returned (this same value can be defined through dialog.returnValue);

¹: When used more than one <dialog> in the document, when using the method show() in all, their order in the document will import, the latter being superimposed on all others, already when using the method showModal(), will overwrite the entire document in that window in which it was last opened. Tests demonstrating this behavior below.

Example with two dialog windows opened initially

Only works on Google Chrome!

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quae doloribus consequuntur unde, atque inventore numquam corporis vel, quod neque cupiditate optio fuga, natus beatae architecto blanditiis voluptate perspiciatis debitis.</p>

<input type="text">

<dialog open id="dialog1">
  <p>Janela de diálogo 1</p>
  <button onclick="this.parentElement.close()">Fechar</button>
</dialog>

<dialog open id="dialog2">
  <p>Janela de diálogo 2</p>
  <button onclick="this.parentElement.close()">Fechar</button>
</dialog>

Example with two dialog windows using the method show()

Only works on Google Chrome!

dialog1.close();
dialog2.close();

dialog2.show();
dialog1.show();

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quae doloribus consequuntur unde, atque inventore numquam corporis vel, quod neque cupiditate optio fuga, natus beatae architecto blanditiis voluptate perspiciatis debitis.</p>

<input type="text">

<dialog open id="dialog1">
  <p>Janela de diálogo 1</p>
  <button onclick="this.parentElement.close()">Fechar</button>
</dialog>

<dialog open id="dialog2">
  <p>Janela de diálogo 2</p>
  <button onclick="this.parentElement.close()">Fechar</button>
</dialog>

Realize that, even if dialog1.show() was called after dialog2.show(), window 2 will override 1 due to the order they are displayed in the document.

Example with two dialog windows using the method showModal()

Only works on Google Chrome!

const dialog1 = document.getElementById("dialog1");
const dialog2 = document.getElementById("dialog2");

dialog1.close();
dialog2.close();

dialog2.showModal();
dialog1.showModal();

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quae doloribus consequuntur unde, atque inventore numquam corporis vel, quod neque cupiditate optio fuga, natus beatae architecto blanditiis voluptate perspiciatis debitis.</p>

<input type="text">

<dialog open id="dialog1">
  <p>Janela de diálogo 1</p>
  <button onclick="this.parentElement.close()">Fechar</button>
</dialog>

<dialog open id="dialog2">
  <p>Janela de diálogo 2</p>
  <button onclick="this.parentElement.close()">Fechar</button>
</dialog>

Already using showModal(), window 1 will overlap window 2, but note that when one window overlaps others, those that are overlapped are not closed.

What is the compatibility of this tag?

Almost nil. To see the current support, simply access the Can I Use, but right now basically only Chrome has support:

Which already covers the vast majority of Internet users as well as the site itself points out, but personally I do not recommend its use, for now.

This tag has a future?

In the short term, it would appear not. As I commented, something went wrong during the implementation of this element and the W3C itself says that this element can be removed. It is not very clear whether it will be removed because browsers do not implement it, or whether they have not implemented it due to some specification problem. However, this element has all the features that HTML 5 proposed, so I believe that at some point in time it will be reset or reimplemented, correcting the faults that made it unusable at the time.

Until second orders, the ideal is not to use it in production if you do not want to have headaches.

---

As commented by Felipe Marinho, it is possible to track the implementation in some browsers:

• Mozilla Firefox: [meta] Implement the HTML5 dialog element
• Microsoft Edge: <dialog> element for modals