nested sl-tree-item not placed in hierarchy if it's not direct child

[XorTdsc]

It seems that sl-tree-items are only placed correctly in the tree-hierarchy if the nested sl-tree-items are DIRECT children. I demonstrated this here by wrapping some nested nodes in a div-tag. The wrapped children are placed right to the parent rather than as nested nodes.

This however seems to make it impossible for example to make a sl-tree-item an Angular component as it necessarily wraps the sl-tree-item in the Angular-component-tag. (though I'm new to all of this, so I might not see something here how this is supposed to work)
Any ideas on how to could be possible to wrap each sl-tree-item in an angular component and instance it in the sl-tree ?