Shorthand zum Erweitern des nativen DOM-Elements?

Question

Wie explained in mdn können benutzerdefinierte Elemente auf einem nativen Element basieren. Zum Beispiel <button is="my-button">. Was ich suche, ist eine Art umgekehrte Syntax. Ich möchte eine Kurzschrift für das Erstellen eines Elements, dessen Tag benutzerdefiniert ist und auf einem nativen Element wie <purchase-button is="button"> basiert. Ich schaue diesem benutzerdefinierten Element keine zusätzliche Funktionalität zu, die HTMLButtonElement bietet. Nur der Name.

Doch das funktioniert nicht:

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

Das resultierende Element nicht HTMLButtonElemenet erstreckt.

Answer 1

Dies ist nicht möglich und ist in der Spezifikation für benutzerdefinierte Elemente nicht vorhanden.

Über diese Anforderung siehe issue 603 im Spezifikationsforum.

Einige diskutieren ähnliche Bedürfnisse in anderen Ausgaben (zum Beispiel #509, viel Glück für das Lesen ...).

Um dieses Problem zu umgehen, definieren Sie ein benutzerdefiniertes <purchase-button> Element, in das Sie eine einfügen. Dann können Sie ein Shadow-DOM mit dem Element <slot> verwenden, um den ursprünglichen Inhalt des <purchase-button> widerzuspiegeln.

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>

Answer 2

Hier ist eine hässliche Art und Weise:

class PButton extends HTMLElement {} 
 
customElements.define("purchase-button", PButton) 
 
function PurchaseButton() { 
 
    var pb = document.createElement('purchase-button') 
 
    pb.__proto__ = PurchaseButton.prototype 
 
    return pb 
 
} 
 
PurchaseButton.prototype.__proto__ = HTMLButtonElement.prototype 
 
var purchaseButton = PurchaseButton() 
 
purchaseButton.textContent = "Purchase" 
 
purchaseButton.style = window.getComputedStyle(document.querySelector("button")).cssText 
 
document.body.appendChild(purchaseButton) 
 
document.body.appendChild(document.createTextNode(" ⬅ custom <purchase-button>"))

<button>Purchase</button> ⬅ native &lt;button&gt;<p>