Use the <dialog />

[diasbruno]

This was @yungcalibri's suggestion on the react-modal v4 discussion.

What we need is to:

• What happen if someone has a custom element called dialog?
• What is the behavior if this tag is not available (default to div)?
• There are divergence on implementations across browsers?

[herrherrmann]

I think using <dialog> would make a lot of sense!

What happen if someone has a custom element called dialog?

Are you referring to a custom web component named <dialog>? Is that a use case we can expect in the React world? To me, it sounds like this is an edge case and could perhaps just be mentioned in a “caveats” section of the readme or so. But if you know any more details about this case, please let me know!

What is the behavior if this tag is not available (default to div)?

A polyfill could be an interesting alternative here, e.g. this one: https://github.com/GoogleChrome/dialog-polyfill
Additionally, there could be a legacy mode that does not use <dialog>, e.g. if someone needs to support IE11 or older Firefox versions (looks like only very recent Firefox versions started supporting <dialog> without any config flags).

[diasbruno]

The idea for this discussion is to gather information about it.
I don't think we are going to get this for v4, but it would
be nice to know how it can improve the experience of using
modals.

[yungcalibri]

I think point 1 is a write-off, as custom elements require a dash in their name.

The browser standard styling for the dialog element is pretty sparse, as far as I can tell. It seems to be a border and some padding.

This post from a few months ago argues against using it on grounds of lack of support; caniuse has support at ~93%. That's more than one in twenty people without support.

Do you think it would simplify the library?

[diasbruno]

This post brings lots of good information.

I did a little bit of hacking around, and, it seems to be working great (I'm on firefox/linux now).

Using the dialog we get:

Pros:

• A) Better native support for a11y (fantastic)
• B) Styling still works
• C) Animations still works

Cons:

• D) The browser will control how it will be closed (using esc, don't know if this behavior can be managed)
• E) Lose control over the overlay/backdrop element (since they are controlled)

It seems to be a hard trade-off. D seems to be the hardest one.

[diasbruno]

I think we need a POC to check if we can control how it the close on esc behavior.

[diasbruno]

Reference for overlay/backdrop styling from css-tricks.com