How to use hyperscript to trigger HTML5 dialog element?

I'm at lost on how to trigger dialog element using Hyperscript. My code as below:

<dialog id="mydialog">
  <button autofocus onclick="document.querySelector('dialog').close();">Close</button>
  <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button onclick="document.querySelector('dialog').showModal()">Show the dialog (JS)</button>
<button _="on click send showModal() to #mydialog">Show the dialog (HS)</button>

Link to jsfiddle: https://jsfiddle.net/3foawk6s/

Since you're using native javascript api, you need to leverage the call command.

Here's your example with HS version included:

<dialog id="mydialog">
   <button autofocus onclick="document.querySelector('dialog').close();">Close</button>
   <button autofocus _="on click call #mydialog's close()">Close (HS).</button>
   <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button onclick="document.querySelector('dialog').showModal()">Show the dialog (JS)</button>
<button _="on click call #mydialog's showModal()">Show the dialog (HS)</button>