How to get a callback when user element * and its children * were initialized

Question

I am inserting custom elements. I would like my parent user methods and element usage properties to be created from the prototype of its child user element. For instance.

<script> var ChildElement = Object.create(HTMLElement.prototype); ChildElement.getName = function () { return "Bob"; } document.registerElement("child-element", { prototype: ChildElement }); var ParentElement = Object.create(HTMLElement.prototype); ParentElement.createdCallback = function () { var self = this; setTimeout(function () { // This logs 'Bob', correctly console.log(self.childNodes[0].getName()); }, 0); // This explodes - getName is not defined. console.log(self.childNodes[0].getName()); }; document.registerElement("parent-element", { prototype: ParentElement }); </script> <parent-element><child-element></child-element></parent-element> 

As indicated on the line, the parent cannot read anything that is defined on the prototype of the child. It can, if it starts an immediate setTimeout; he just needs to wait until the child nodes of this element are installed.

This seems to be due to the callback order when creating the element, which I think looks something like this:

• Parent prototype installed (from HTMLElement to ParentElement)
• The createdCallback spring is called
• The parent affiliate call is called
• Child prototype installed (from HTMLElement to ChildElement)
• The createdCallback child is called
• The resident child call is called

The fact that the created Callback is created at this point makes sense, but as far as I can tell, in all cases when all your children are created, there are no callbacks. I think this means that it is impossible to do anything while creating that uses a prototype of your children without using setTimeout to wait for the entire page to complete.

Are there any callbacks or events that you can listen on the parent to fire only once, when the prototype of all of your child nodes has been installed? Is there any other approach that will allow you to use such structures? Is there anything else you can do besides running setTimeout?

I figured that custom elements were designed to allow parameterization with other element contents, and the presence of custom elements that are not supported in this content is quite surprising.

Perhaps this could be seen as a duplicate of Prototype, not defined when accessing children when creating a custom tag . However, this question is poorly worded, with broken examples, and the only answer seems to be an implementation error, not a solution (or at least not the current version of the browser)

Answer 1

In fact, there are many ways to achieve this using nested custom elements.

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

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

In a complex scenario, you can use instead:

• a Promise object specified by a parent and resolved by one or more children,
• Custom events triggered by children and caught by the parent,
• a MutationObserver object set to watch for changes in the parent list of children ...