fix(tree): update selectors to include only direct children

docs/pages/components/tree.md

@@ -7,11 +7,13 @@ layout: component
 
 ```html:preview
 <sl-tree>
+  <sl-icon name="android" slot="expand-icon"></sl-icon>
   <sl-tree-item>
     Deciduous
     <sl-tree-item>Birch</sl-tree-item>
     <sl-tree-item>
       Maple
+      <sl-icon name="pencil" slot="expand-icon"></sl-icon>
       <sl-tree-item>Field maple</sl-tree-item>
       <sl-tree-item>Red maple</sl-tree-item>
       <sl-tree-item>Sugar maple</sl-tree-item>

src/components/tree/tree.component.ts

@@ -120,7 +120,7 @@ export default class SlTree extends ShoelaceElement {
   // Generates a clone of the expand icon element to use for each tree item
   private getExpandButtonIcon(status: 'expand' | 'collapse') {
     const slot = status === 'expand' ? this.expandedIconSlot : this.collapsedIconSlot;
-    const icon = slot.assignedElements({ flatten: true })[0] as HTMLElement;
+    const icon = slot.assignedElements()[0] as HTMLElement;
 
     // Clone it, remove ids, and slot it
     if (icon) {
@@ -140,9 +140,9 @@ export default class SlTree extends ShoelaceElement {
     item.selectable = this.selection === 'multiple';
 
     ['expand', 'collapse']
-      .filter(status => !!this.querySelector(`[slot="${status}-icon"]`))
+      .filter(status => !!this.querySelector(`:scope > [slot="${status}-icon"]`))
       .forEach((status: 'expand' | 'collapse') => {
-        const existingIcon = item.querySelector(`[slot="${status}-icon"]`);
+        const existingIcon = item.querySelector(`:scope > [slot="${status}-icon"]`);
 
         if (existingIcon === null) {
           // No separator exists, add one