无法关闭显示设置为网格的 <dialog> 元素

Question

当该对话框的样式设置为时， HtmlDialogElement.close ()函数似乎对该元素没有任何影响。<dialog>displaygrid

有人知道为什么吗？请注意，删除display: grid允许对话框正常运行。我在最新版本的 Chrome 和 Firefox 上都看到过这种行为。

请参阅下面的最小复制。如果您愿意，这里有一个 Codepen：https://codepen.io/ChristianMay/pen/MWrmdzJ

let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
  dialog.close();
})

dialog {
  display: grid;
}

<dialog class="dialog" open="">
  Test
</dialog>

<button id="dialog-close">Close dialog</button>

Answer 1

open如果该属性存在，则该对话框被视为打开（或显示） 。

一旦该属性不存在，对话框就会被隐藏。我认为将显示设置为网格会覆盖对话框的默认样式，该样式应在open删除对话框时隐藏对话框。我们可以通过向不带属性的对话框添加样式来恢复此行为open。

let dialog = document.querySelector('dialog')
let closeButton = document.querySelector("#dialog-close");
closeButton.addEventListener('click', () => {
   dialog.close();
})

dialog:not([open]){
  display:none;
}


dialog{
  display:grid;
}

<dialog class="dialog" open="">
  Test
</dialog>

<button id="dialog-close">Close dialog</button>