能否无需JavaScript的showModal()方法，以模态方式打开HTML dialog元素？

是的，你说得没错：普通打开<dialog>既可以通过HTML的open属性实现，也能调用JavaScript的show()方法；但模态打开<dialog>目前只能通过JavaScript的showModal()方法实现，没有对应的HTML属性可以直接达成这个效果。

下面是具体的场景演示：

1. HTML设置open属性（等效JS的show()） #

此时<dialog>处于普通打开状态，外部的按钮X可以正常点击：

<button>X</button>
<dialog open>
  Example
</dialog>

2. JavaScript调用show()方法 #

效果和HTML设置open属性完全一致，外部按钮X仍可点击：

document.getElementById('my-dialog').show();

<button>X</button>
<dialog id="my-dialog">
  Example
</dialog>

3. JavaScript调用showModal()方法 #

此时<dialog>进入模态状态，页面其他元素（包括按钮X）会被屏蔽，无法点击：

document.getElementById('my-dialog').showModal();

<button>X</button>
<dialog id="my-dialog">
  Example
</dialog>

4. 自定义open-modal属性无效 #

你尝试的open-modal只是自定义属性，并非HTML标准属性，无法触发模态效果，外部按钮X依然可以点击：

<button>X</button>
<dialog open-modal>
  Example
</dialog>

内容的提问来源于stack exchange，提问作者ioannis-kokkalis