在 Safari 上创建 HTML 自定义元素失败,自定义方法未知

问题描述 投票:0回答:0

我在我的 HTML JavaScript 中创建了一个自定义按钮。虽然它按预期在 Chrome 上运行,但在 Safari 上却失败了。既不会调用构造函数,也不能自己调用方法“MyMethod”。我想念什么?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Custom Button Element Example</title>
  </head>
  <body>
    <button is="myown-element-button">Click me!</button>

    <script>
      // Define the custom button element
      class MyButton extends HTMLButtonElement {
        constructor() {
          super();
          this.addEventListener("click", this.myMethod);
        }

        myMethod() {
          console.log("Hello from MyButton!");
        }
      }
      customElements.define("myown-element-button", MyButton, { extends: "button" });

      // Create a new custom button element
      const myButton = document.createElement("button", { is: "myown-element-button" });
      myButton.textContent = "Click me too!";
      document.body.appendChild(myButton);
      myButton.myMethod();
    </script>
  </body>
</html>

javascript html custom-element
© www.soinside.com 2019 - 2024. All rights reserved.