HTML is属性与内置自定义元素

展示

代码

• HTML：

  <button onclick="dialog.show()">点击显示</button>
  <dialog id="dialog" is="zxx-dialog">
      <p>我是内容。</p>
      <p><button onclick="dialog.hide()">关闭</button></p>
  </dialog>

• JS：

  class ZxxDialog extends HTMLDialogElement {
    constructor() {
      super();
    }
    hide () {
      this.close();
    }
  }
  // 定义组件名称
  customElements.define("zxx-dialog", ZxxDialog, { extends: "dialog" });