自定义元素：无法从按钮扩展非法构造函数

Question

<my-button 
        id="elem" 
        >
        problem
       </my-button>


       <button>
        works
       </button>

class MyButton extends HTMLButtonElement  {
    constructor(){
        super(); // must call constructor from parent class
    }
}

  customElements.define("my-button", MyButton, { extends: 'button'});

我的问题是：为什么我没有得到像 Button 这样的元素？只是文字

Answer 1

注意：自定义内置元素在 Apple-Safari 中不工作 （而且永远不会）

自定义内置元素符号是带有is=参考的原始元素：

<button is="my-button">

下面的代码适用于 Chrome、Edge、FireFix 和 Opera

<button is="my-button" id="foo">Click Me!</button>
<button is="my-button" id="bar">Click Me!</button>

<script>
customElements.define("my-button", 
  class extends HTMLButtonElement  {
      connectedCallback(){
        console.log("connected", this.id);
        this.onclick = (evt) => {
          console.log("You clicked", this.id);
        }
      }
  }, { extends: 'button'});
 </script>

创建元素符号：

let myButton = document.createElement("button", { is: "my-button" });