How to get a callback when a custom element *and it's children* have been initialized

Question

I\'m nesting custom elements. I\'d like to have my parent custom element use methods and properties from its child custom element\'s prototype. E.g.

Answer 1

Actually, there are many different ways to achieve this with nested custom elements.

The direct way is to add a custom callback to the parent element that will be called by the child element from its attachedCallback method:

ParentElement.childAttachedCallback = function ()
{
    console.log( this.childNodes[0].getName() )
}

ChildElement.attachedCallback = function()
{
    this.parentElement.childAttachedCallback()
}

In a complex scenario you could use instead:

• a Promise object set by the parent and resolve by one or more childs,
• Custom Events fired by childs and caught by the parent,
• a MutationObserver object set to observe changes in the parent's child list...