Javascript 扩展本机DOM元素的缩写？

如前所述，自定义元素可能基于本机元素。例如，

。我要找的是一种相反的语法。我想要一个用于创建其标记为自定义且基于本机元素的元素的缩写，例如

。我不打算在

HTMLButtonElement

提供的基础上向这个自定义元素添加功能。只是名字

然而，这不起作用：

let purchaseButton = document.createElement('purchase-button', { is: 'button' })
document.body.appendChild(purchaseButton)

---

结果元素不扩展

HTMLButtonElemenet

这是不可能的，并且它不存在于自定义元素规范中

关于此要求，请参见规范论坛中的

一些人正在讨论其他问题的类似需求（例如，祝阅读好运…）

作为一种解决方法，请定义一个

自定义元素，在其中插入

。然后，可以将阴影DOM与

元素一起使用，以反映

的原始内容

customElements.define（'purchase button'，类扩展HtmleElement{
构造函数（）{
超级（）
this.attachShadow（{mode:'open'}）
.innerHTML=“”
}
} )
PB.onclick=ev=>
console.info（“[%s]已单击”，ev.target.textContent）

支付

这里有一个丑陋的方法：

类PButton扩展HtmleElement{}
customElements.define（“购买按钮”，PButton）
函数PurchaseButton（）{
var pb=document.createElement（'purchase-button'）
pb.\uuuu proto\uuuu=PurchaseButton.prototype
返回pb
}
PurchaseButton.prototype.\uuuu proto\uuuu=htmlButtoneElement.prototype
var purchaseButton=purchaseButton（）
purchaseButton.textContent=“购买”
purchaseButton.style=window.getComputedStyle（document.querySelector（“按钮”））.cssText
document.body.appendChild（purchaseButton）
document.body.appendChild（document.createTextNode（“⬅ 自定义“）

购买⬅ 本机按钮