扩展HTMLDialogElement

Question

我应该能够通过生成一个扩展HTMLDialogElement的类来创建一个自定义对话框。但是，当我这样做时，.showModal()方法会抛出一个“不存在”错误。很明显我漏掉了什么东西，是什么？

HTML：

<modal-dialog></modal-dialog>

Javascript：

class ModalDialog extends HTMLDialogElement { constructor() { super(); } }

customElements.define('modal-dialog', ModalDialog, {extends: 'dialog'});

document.querySelector('modal-dialog').showModal();

Answer 1

您正在指定一个自定义的内置元素，您在DOM中使用它们的方式与自治的自定义元素不同。来自关于使用自定义元素的MDN文档

自定义的内置元素继承了基本的HTML元素.要创建其中一个元素，您必须指定它们扩展的元素(如上面示例中所暗示的那样)，使用它们的方法是写出基本元素，但在is属性(或属性)中指定自定义元素的名称。例如，<p is="word-count">或document.createElement("p", { is: "word-count" })。

因此，在您的示例中，您需要稍微调整自定义元素的用法，如下所示：

​

class ModalDialog extends HTMLDialogElement { constructor() { super(); } }

customElements.define('modal-dialog', ModalDialog, {extends: 'dialog'});

document.querySelector('dialog').showModal();

<dialog is="modal-dialog"></dialog>

​