Impossible d'accéder aux attributs d'un élément personnalisé de son constructeur

J'essaie de créer une polyvalence en utilisant l'API Custom Elements pour les éléments personnalisés utilisés par un moteur de navigateur dans le jeu pour afficher des boutons et similaires. Cependant, je ne parviens pas à accéder aux attributs de l'élément (p. Ex. Src, href …) dans le constructeur.

Voici un exemple:

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>

Vous ne pouvez pas accéder à l'arborescence DOM des éléments avec querySelector() et appendChild() et les attributs avec getAttribute() et setAttribute() dans le constructor() .

C'est parce que, au moment du constructor() l'élément personnalisé n'a pas encore de contenu.

Vous devriez différer cela dans la méthode connectedCallback() et ce sera bien.

À partir des spécifications :

L'élément ne doit pas acquérir d'attributs ni d'enfants, car cela viole les attentes des consommateurs qui utilisent les méthodes createElement ou createElementNS.

En général, le travail doit être reporté à la plus grande partie possible de ConnectCallback