javascript - 扩展原生 DOM 元素的简写？

Question

作为explained in mdn ，自定义元素可能基于原生元素。例如，<button is="my-button"> .我正在寻找的是一种相反的语法。我想要一个用于创建标签为自定义且基于原生元素的元素的速记，例如 <purchase-button is="button"> .我没有考虑通过 HTMLButtonElement 为这个自定义元素添加功能提供。只是名字。

然而，这不起作用:

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

结果元素不扩展 HTMLButtonElemenet .

Answer 1

这是不可能的，自定义元素规范中也不存在。

关于此要求，请参阅 issue 603在规范论坛中。

一些正在讨论其他问题中的类似需求(例如#509，祝阅读顺利......)。

作为解决方法，定义一个 <purchase-button>插入 <button> 的自定义元素.然后你可以使用 Shadow DOM 和 <slot>元素来反射(reflect) <purchase-button> 的原始内容.

customElements.define( 'purchase-button', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = '<button><slot></slot></button>'
    }
} )

PB.onclick = ev => 
  console.info( '[%s] clicked', ev.target.textContent )

<purchase-button id=PB>Pay</purchase-button>