Ich kann nicht auf Attribute eines benutzerdefinierten Elements von seinem Konstruktor zugreifen

Question

Ich versuche, ein Polyfill der Arten mit dem Custom Elements API für benutzerdefinierte Elemente zu erstellen, die von einer In-Game-Browser-Engine verwendet werden, um Schaltflächen und ähnliches anzuzeigen. Ich kann jedoch anscheinend nicht auf die Attribute des Elements (zB. Src, href ...) innerhalb des Konstruktors zugreifen. Hier

ein Beispiel:

class KWButton extends HTMLElement { 
 
    constructor() { 
 
    super(); 
 
    var attributes = this.attributes; 
 
    var shadow = this.attachShadow({ 
 
     mode: 'open' 
 
    }); 
 
    var img = document.createElement('img'); 
 
    img.alt = this.getAttribute('text'); // the getAttribute call returns null 
 
    img.src = this.getAttribute('src'); // as does this one 
 
    img.width = this.getAttribute('width'); // and this 
 
    img.height = this.getAttribute('height'); // and this 
 
    img.className = 'vivacity-kwbutton'; // this works fine 
 
    shadow.appendChild(img); 
 
    img.addEventListener('click',() => { 
 
     window.location = this.getAttribute('href'); // this works perfectly fine 
 
    }); 
 
    } 
 
} 
 
customElements.define('kw-button', 
 
    KWButton);

<kw-button src="https://placekitten.com/g/198/39" width="198" height="39" icon_src="https://placekitten.com/g/34/32" icon_width="34" icon_height="32" href="https://placekitten.com/" text="placekiten" color="#ffffff" size="18"></kw-button>

Answer 1

Sie können nicht das Element DOM-Baum Zugriff mit querySelector() und appendChild() und Attribute mit getAttribute() und setAttribute() im constructor().

Es ist, weil zu der Zeit constructor() aufgerufen wird, hat das benutzerdefinierte Element noch keinen Inhalt.

Sie sollten dies in der connectedCallback() Methode verschieben, und es wird in Ordnung sein.

Von the specs:

Das Element darf keine Attribute oder Kinder gewinnen, da dies die Erwartungen der Verbraucher verletzt, die die createelement oder createElementNS Methoden.

Im Allgemeinen sollen die Arbeiten so weit wie möglich