Невозможно получить доступ к атрибутам пользовательского элемента из его конструктора

Question

Я пытаюсь создать многопользовательскую сортировку с использованием API пользовательских элементов для пользовательских элементов, используемых движком браузера в игре, для отображения кнопок и т.п. Однако я не могу получить доступ к атрибутам элемента (например, src, href ...) изнутри конструктора.

Вот пример:

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

Вы не можете получить доступ к элементу DOM дерево с querySelector() и appendChild(), и атрибуты с getAttribute() и setAttribute() в constructor().

Это потому, что в то время constructor() называется пользовательский элемент еще не добавил.

Вы должны отложить это в методе connectedCallback(), и все будет хорошо.

От the specs:

Элемент не должен получить атрибуты или детей, так как это нарушает ожидания потребителей, которые используют createElement или createElementNS методы.

В целом, работа должна быть отложена до connectedCallback как можно больше