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

Question

HtmlDialogElement.close((函数在<dialog>元素的display样式设置为grid时似乎对该元素没有影响。

有人知道为什么吗？请注意，删除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>

Answer 2

已经回答，但只有当<dialog>是打开的对话框时，您也可以将其显示为网格；(

dialog[open] {
display: grid;
}

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

CSS属性选择器根据给定属性的存在或值匹配元素。

使用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>

笔叉