Possibility to wrap FluentTreeItems in a <div>?

[sahra-marie]

Hi there!
I'm looking for a possibility to wrap the children of a FluentTreeItem in a <div> without messing up the style.
I'm not entirely sure if this is a problem of the blazor component or the underlying web-components of fluentui but maybe someone else knows this?

I need the possibility to write my code like this:

    <FluentTreeItem Text="folder">
        <div>
            <FluentTreeItem Text="child1"></FluentTreeItem>
            <FluentTreeItem Text="child2"></FluentTreeItem>
            <FluentTreeItem Text="child3"></FluentTreeItem>
        </div>
    </FluentTreeItem>

But this is the outcome:

Instead of this:

(Side note why I need this: I'm hoping that the <div> will make SortableJS work for the tree. In the end the <div> should get a class that allows me to find the elements via js, as this doesn't seem to work properly when setting the class directly on the FluentTreeItem.)

[dvoituron]

Unfortunately, I don't think there's anything we can do. This seems to be a limitation of the WebComponents currently in use.
The first example is well displayed (by div) but the second doesn't render correctly.

  <fluent-tree-view>
    <fluent-tree-item>One</fluent-tree-item>
    <fluent-tree-item>Two
      <fluent-tree-item>A</fluent-tree-item>
      <fluent-tree-item>B</fluent-tree-item>
    </fluent-tree-item>
  </fluent-tree-view>
  
  <hr />
  
  <fluent-tree-view>
    <fluent-tree-item>One</fluent-tree-item>
    <fluent-tree-item>Two
    <div>    
        <fluent-tree-item>A</fluent-tree-item>
        <fluent-tree-item>B</fluent-tree-item>
      </div>
    </fluent-tree-item>
  </fluent-tree-view>

See https://jsfiddle.net/dvoituron/skzbm6p5/106/