Javascript 扩展HtmlButtoneElement的WebComponent未调用构造函数（）和connectedCallBack（）

我试图创建一个

按钮

，但当我在HTML中添加它时，

构造函数（）

函数从未被调用

class MyButton扩展了HtmlButtoneElement{
title=“”；
构造函数（{title}）{
超级（）；
this.title=标题；
this.addEventListener（“单击”，（e）=>this.rippe（e.offsetX，e.offsetY））；
}
里普（x，y）{
设div=document.createElement（“div”）；
div.classList.add（“ripple”）；
这名儿童（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（“已转换的”，（e）=>div.remove（））；
}
connectedCallback（）{
this.innerHTML=this.title；
}
}
define（“我的按钮”，MyButton，{扩展：“按钮”}）
我的按钮{
光标：指针；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景：#12c2e9；
背景：-webkit线性渐变（向右，#12c2e9，#c471ed，#f64f59）；
背景：线性梯度（向右，#12c2e9，#c471ed，#f64f59）；
边界半径：28px；
边界：无；
高度：56px；
宽度：268px；
大纲：无；
颜色：#fff；
字体大小：16px；
字体系列：-苹果系统、MacSystemFont、无衬线字体；
}
我的按钮：悬停{
滤镜：对比度（90%）；
}
我的按钮：活动{
滤镜：对比度（85%）；
}

web组件
Re：来自评论

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

有两种不同的风味Web组件：

详情见


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

但Apple/WebKit不会按照2016年的规定实施后者：


您确定要执行此扩展内置元素路线吗？苹果表示不会实施这些措施。因此，从
HTMLElement
扩展“自治元素”是唯一的跨浏览器选项。@Danny我在apple站点中搜索了此信息，但没有找到它们：，似乎对safari可用。