Как я могу узнать, когда дочерний элемент создается на родительском элементе в JavaScript/TypeScript? ⇐ Javascript

[Anonymous]

У меня есть три пользовательских компонента, MyParentElement и MyChildElement1 и MyChildElement2: < /p>


class MyParentElement extends HTMLElement
{
connectedCallback()
{
console.log('MyParentElement connectedCallback()');
for (let i = 0; i < this.children.length; ++i)
{
const elem = this.children;
if (elem.tagName.toLowerCase() == 'my-child-element-1' || elem.tagName.toLowerCase() == 'my-child-element-2')
{
console.log(`elem.sortValue: ${elem.sortValue}`);
}
}

setTimeout(() =>
{
for (let i = 0; i < this.children.length; ++i)
{
const elem = this.children;
if (elem.tagName.toLowerCase() == 'my-child-element-1' || elem.tagName.toLowerCase() == 'my-child-element-2')
{
console.log(`elem.sortValue: ${elem.sortValue}`);
}
}
}, 10);
}
}
customElements.define("my-parent-element", MyParentElement);

class MyChildElement1 extends HTMLElement
{
constructor()
{
super();
console.log(`MyChildElement1: ${this.sortValue}`);
}

get sortValue() { return 1; }
}
customElements.define("my-child-element-1", MyChildElement1);

class MyChildElement2 extends HTMLElement
{
constructor()
{
super();
console.log(`MyChildElement2: ${this.sortValue}`);
}

get sortValue() { return 2; }
}

customElements.define("my-child-element-2", MyChildElement2);< /code>



< /code>
< /div>
< /div>
< /p>
при подключении Callcallback () вызывается для myParentelement, Sort -Value дает мне неопределенную. После того, как конструктор требуется для двух дочерних элементов, Sort -Value будет работать, как и ожидалось. MutationObserver, похоже, не работал для детей, которые уже существуют как часть HTML (но он будет работать, если я создам элементы и использую AppendChild (), однако я надеюсь избежать этого).


Подробнее здесь: https://stackoverflow.com/questions/797 ... javascript