扩展 HTMLButtonElement 的 WebComponent 不调用 constructor() 和 connectedCallBack()

Question

我正在尝试创建一个 web component button，但是当我将它添加到 HTML 时，constructor() 函数永远不会被调用。

class MyButton extends HTMLButtonElement {
  title = "";
  constructor({ title }) {
    super();
    this.title = title;
    this.addEventListener("click", (e) => this.rippe(e.offsetX, e.offsetY));
  }

  rippe(x, y) {
    let div = document.createElement("div");
    div.classList.add("ripple");
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight / 2} px`;
    div.style.left = `${x - div.clientWidth / 2} px`;
    div.style.backgroundColor = "currentColor";
    div.classList.add("run");
    div.addEventListener("transitioned", (e) => div.remove());
  }

  connectedCallback() {
    this.innerHTML = this.title;
  }
}
window.customElements.define("my-button", MyButton, { extends: "button" });

my-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #12c2e9;
  background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  border-radius: 28px;
  border: none;
  height: 56px;
  width: 268px;
  outline: none;
  color: #fff;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

my-button:hover {
  filter: contrast(90%);
}

my-button:active {
  filter: contrast(85%);
}

<!DOCTYPE html>
<html lang="pt">
  <head title="test page">
    <script type="text/javascript" src="./my_button.js"></script>
    <link rel="stylesheet" type="text/css" href="./my_button.css" />
  </head>
  <meta charset="UTF-8" />
  <title>web components</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <body>
    <my-button title="Wab components!"></my-button>
  </body>
</html>

我遇到了一些问题：

1- constructor() 没有被调用，所以我的事件监听器没有被添加到元素；
2- connectedCallback () 生命周期也没有被调用，所以我的按钮没有将 title 作为参数传递；

为什么会这样，我该如何解决？

constructor() 只有在我实例化我的自定义元素并附加到`body:

时才会被调用

let popup = new PopUpInfo();
document.body.appendChild(popup);

但我会在 HTML 中使用我的自定义选择器“my-button”而不是附加它。

Answer 1

回复：来自评论

那link是为了HTMLButtonElement那是所有浏览器都支持的标准元素。

有 2 种不同风格的 Web 组件：
详情见

自治元素（从 HTMLElement 扩展）
自定义内置元素（从任何元素扩展）

但是Apple/WebKit不会实现2016中所述的后者：

https://github.com/WICG/webcomponents/issues/509

扩展 HTMLButtonElement 的 WebComponent 不调用 constructor() 和 connectedCallBack()

WebComponent that extends HTMLButtonElement is not calling constructor() and connectedCallBack()

html

javascript

web-component