Web Components should wait for their subcomponents to be fully initialized

[onsetsu]

Currently, race conditions may happen, as with the Graph-Control component.

The Graph-Control uses a Knot-View defined in its template:

<template id="graph-control" >
[...]
<div><knot-input id="open-knot-view"></knot-input></div>

This subcomponent is accessed in its initialize method:

export default class GraphControl extends Morph {
  async initialize() {
    [...]
    let input = this.get('#open-knot-view');
    input.setLabel('Open Knot');
    [...]

Problem: In some scenarios, the initliaze method is called, before the Knot-View is fully loaded and initialized, so, setLabel is not understood.

Potential fix: properly wait recursively for all components defined in the shadowroot and as children, before calling initialize.

[JensLincke]

I tried to reproduce it... but failed so far...

Can we reproduce it somehow here?

https://lively-kernel.org/lively4/lively4-jens/templates/foo-comp.html https://lively-kernel.org/lively4/lively4-jens/templates/foo-comp-sub.js

[JensLincke]

seem to work since it did not happen again