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

Question

当对话框的 display 样式设置为 grid.

时，HtmlDialogElement.close() 函数似乎对 <dialog> 元素没有影响

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

请参阅下面的最小复制。如果您愿意，这里有一个代码笔：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>

Answer 2

已经回答，但您也可以将 <dialog> 显示为网格，前提是它是 opened 对话框；）

dialog[open] {
  display: grid;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

The CSS attribute selector matches elements based on the presence or value of a given attribute.

使用 CSS 属性选择器的演示代码段

const dialog = document.querySelector('dialog')

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

let openButton = document.querySelector("#dialog-open");
openButton.addEventListener('click', () => {
  dialog.setAttribute("open", "");
})

dialog[open] {
  display: grid;
}

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

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

fork of your pen

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

Cannot close <dialog> element with display set to grid

html

javascript

css

dialog