扩展 HTMLButtonElement 的 WebComponent 没有调用 constructor() 和 connectedCallBack()答案

【问题标题】：WebComponent that extends HTMLButtonElement is not calling constructor() and connectedCallBack()扩展 HTMLButtonElement 的 WebComponent 没有调用 constructor() 和 connectedCallBack()
【发布时间】：2021-03-05 14:32:35
【问题描述】：

我正在尝试创建一个web componentbutton，但是当我在 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”而不是附加它。

【问题讨论】：

您确定要走这条扩展内置元素路线吗？苹果已经表示不会实施它们。所以从HTMLElement "Autonomous Elements" 扩展是唯一的跨浏览器选项。
@Danny 我在苹果网站上搜索了这些信息，但没有找到：developer.apple.com/documentation/webkitjs/…，似乎有 Safari 的可用性。

标签： javascript html web-component

【解决方案1】：

回复：来自 cmets

该链接指向HTMLButtonElement，这是所有浏览器都支持的标准元素。

有 2 种不同风格的 Web 组件：
详情见Web Components : extending native elements

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

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

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

【讨论】：