Angular ng-if directive breaks web component exported with Angular elements

Question

I would desperately ask for help to check if this is an Angular issue, an Angular element issue or a issue that I caused.

Intro

In our client project we're exporting components as web components with the help of Angular elements. With a certain use case I'm facing issues which is stacking a web component inside another web component. Let me go into detail by providing you snippets from the test project that I pushed to github: https://github.com/aetzlecx/angular-elements-stacking/ (The test project is very simplified to just demonstrate the issue and leave out other unnecessary details or project related details)

Side note: I tried this with Angular version 10, 11 and 12 ;).

The parent component

The parent component uses content projection to include child components with the help of ng-content. A button simply toggles the child content:

<button (click)="triggerButtonClicked()">Toggle</button>

<p>Child content:</p>
<div *ngIf="childVisible">
  <ng-content></ng-content>
</div>

export class ParentComponent {
  childVisible = true;
  triggerButtonClicked(): void {
    this.childVisible = !this.childVisible;
  }
}

Inside of an Angular application when I stack an element into the component it works without any issues and clicking the button makes the child content toggling as expected.

The child component

However when I also now export other Angular components as web components and stack them under the Parent component then I face difficulties with the following test codes. wc-child is just a component that display the given items in an unordered list (ul > li). However the type of web component doesn't matter (simple ones vs. complex ones).

1st use case:

<wc-parent>
  <wc-child items="A,B,C"></wc-child>
</wc-parent>

This causes that the web component disappears after the 2nd toggle.

Demo 1st use case

The DOM looks like this:

DOM 1st use case

2nd use case: Wrapping the web component within a div:

<wc-parent>
  <div>
    <wc-child items="A,B,C"></wc-child>
  </div>
</wc-parent>

This example causes that the content of the web component immediately disappears after the first toggle:

Demo 1st use case

The DOM looks pretty similar as in the first example

Debugging attempts

Details of my debugging attempts:

• When I try to toggle the component by setting the display attribute to either block or none it works perfectly.
• What I also did so far is to remove @angular/elements dependency and copy the elements code into my project and poke around the elements code. I discovered that basically the NgElement implemented the whole web component's life cycle process which is on disconnectedCallback destroying the component and on connectedCallback initializing it again. I can see within the Chrome Dev tools that after the first toggle the component doesn't have the attribute anymore set (e.g. by calling document.querySelector('wc-child').items which evaluates then to undefined)

Any help here would be very appreciated :)

Many thx Cheers