How to detect if browser supports dialog

Question

Posted here is an answer that instructs those who miss the old window.showModalDialog JavaScript function to use the

<dialog>

element instead. I have used this along with the polyfill needed for IE and FF and it works. However, there is a noticeable lag introduced when using the polyfill that I would like to avoid for Chrome (not to mention there is a warning not to use the polyfill when browsers support it). How do I detect whether or not the dialog element is supported so I can leave out the polyfill processing? Specifically these lines:

var dialog = document.getElementById('<element id>');
dialogPolyfill.registerDialog(dialog);

Answer 1

You could write a simple test like this:

if (typeof HTMLDialogElement === 'function') {
  /** yep */
} else {
  /** nope */
}

Answer 2

Try console.log(typeof window.showModalDialog === 'undefined')

if (typeof window.showModalDialog === 'undefined') {
  console.log('No. ');
} else {
  console.log('Yes! ');
}