扩展 HTMLButtonElement 的 WebComponent 未调用 constructor() 和connectedCallBack()
ver*_*omS 5 html javascript web-component
我正在尝试创建一个Web 组件 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”，而不是附加它。
回复：来自评论
该链接指向“HTMLButtonElement这是所有浏览器都支持的标准元素”。
有 2 种不同风格的 Web 组件：
详细信息请参阅Web 组件：扩展原生元素
- 自治元素（从 HTMLElement 扩展）
- 定制的内置元素（从任何元素扩展）
但 Apple/WebKit 不会实现后者，如2016 年所述：
https://github.com/WICG/webcomponents/issues/509
