Child custom element's OnInit hook is called before parent's one

[artaommahe]

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Is this a regression?

Dunno

Description

Wrong OnInit hooks call order when custom elements (parent + child) are added with some delay after (regular) angular component inited.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-elements-init-order?file=app%2Fapp.component.html

1. on toggle

   > child OnInit
   > parent OnInit

2. same wrong order on replacing *ngIf="visible" with *ngIf="true"
3. same wrong order on uncommenting window.setTimeout with innerHTML usage in AppComponent's OnInit hook
4. correct order on removing <ng-container *ngIf="visible">

   > parent OnInit
   > child OnInit

🌍 Your Environment

Angular Version: 7.1.4

Anything else relevant?

No such issue with native custom elements and setTimeout + innerHTML usage https://stackblitz.com/edit/custom-elements-init-order?file=index.ts

> parent connected
> child connected

Real word use-case: adding unknown markup with custom elements from api response.

[gkalpak]

This is still an issue in v9: Updated StackBlitz It is strange that this only happens with <ng-container *ngIf="..."> (we need both ng-container and ngIf). (I will also add the comp: core label, because I am not sure this can be fixed purely in @angular/elements.)