using @microsoft/mgt in angular with complex templates

Question

How to use Microsoft mgt components in Angular with complex template like :

<ng-container>
  <mgt-file-list [itemId]="driveItem.id" page-size="5" insight-type="shared" (itemClick)="itemClick($event)">
   
      <template data-type="file">
        <div>
           [[file.id]]  <!-- Work -->
            <mgt-file item-id="[[file.id]]"></mgt-file>        <!-- Error --> 
        </div>
      </template>
  </mgt-file-list>
</ng-container>

The error :

Uncaught DOMException: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.

It's because mgt-file-list create a shadowRoot and all the child template (mgt-file) create an other shadowRoot

In the DOM the template is correctly generate for the child, but when there are append to the parent, the error occure.

the DOM for child template :

<div slot="01H6OMMZVXAM3R5QE67REKGRIH2IXSMKRC" data-generated="template">
        <div>
           01H6OMMZVXAM3R5QE67REKGRIH2IXSMKRC  
            <mgt-file item-id="01H6OMMZVXAM3R5QE67REKGRIH2IXSMKRC"></mgt-file>         
        </div>
</div>

Edit :

More information : here