refactor: replace slotted with slotchange (#35138)

Author: marchbox

change/@fluentui-web-components-a63e0ca8-4de2-4db4-b527-89b8ffadc945.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "refactor: replace slotted with slotchange for tree and tree-item",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -945,17 +945,21 @@ export class BaseTree extends FASTElement {
     changeHandler(e: Event): boolean | void;
     // Warning: (ae-forgotten-export) The symbol "BaseTreeItem" needs to be exported by the entry point index.d.ts
     //
-    // (undocumented)
+    // @internal (undocumented)
     childTreeItems: BaseTreeItem[];
-    // (undocumented)
+    // @internal (undocumented)
     childTreeItemsChanged(): void;
     // @internal
     clickHandler(e: Event): boolean | void;
     currentSelected: HTMLElement | null;
+    // @internal (undocumented)
+    defaultSlot: HTMLSlotElement;
     // @internal
     elementInternals: ElementInternals;
     // @internal
     focusHandler(e: FocusEvent): void;
+    // @internal (undocumented)
+    handleDefaultSlotChange(): void;
     // @internal
     keydownHandler(e: KeyboardEvent): boolean | void;
 }

packages/web-components/src/tree-item/tree-item.base.ts

@@ -10,6 +10,10 @@ export class BaseTreeItem extends FASTElement {
    */
   public elementInternals: ElementInternals = this.attachInternals();
 
+  /** @internal */
+  @observable
+  public itemSlot!: HTMLSlotElement;
+
   constructor() {
     super();
     this.elementInternals.role = 'treeitem';
@@ -96,6 +100,7 @@ export class BaseTreeItem extends FASTElement {
     this.$fastController.addStyles(this.styles);
   }
 
+  /** @internal */
   @observable
   public childTreeItems: BaseTreeItem[] | undefined = [];
 
@@ -166,4 +171,9 @@ export class BaseTreeItem extends FASTElement {
       this.tabIndex = this.selected ? 0 : -1;
     }
   }
+
+  /** @internal */
+  public handleItemSlotChange() {
+    this.childTreeItems = this.itemSlot.assignedElements().filter(el => isTreeItem(el));
+  }
 }

packages/web-components/src/tree-item/tree-item.template.ts

@@ -1,5 +1,4 @@
-import { elements, html, slotted } from '@microsoft/fast-element';
-import { FluentDesignSystem } from '../fluent-design-system.js';
+import { html, ref } from '@microsoft/fast-element';
 import type { TreeItem } from './tree-item.js';
 
 const chevronIcon = html`
@@ -26,13 +25,7 @@ export const template = html<TreeItem>`
       </div>
     </div>
     <div role="group" class="items" part="items">
-      <slot
-        name="item"
-        ${slotted({
-          property: 'childTreeItems',
-          filter: elements(`${FluentDesignSystem.prefix}-tree-item`),
-        })}
-      ></slot>
+      <slot name="item" ${ref('itemSlot')} @slotchange="${x => x.handleItemSlotChange()}"></slot>
     </div>
   </template>
 `;

packages/web-components/src/tree/tree.base.ts

@@ -35,13 +35,18 @@ export class BaseTree extends FASTElement {
    */
   public elementInternals: ElementInternals = this.attachInternals();
 
+  /** @internal */
+  public defaultSlot!: HTMLSlotElement;
+
   constructor() {
     super();
     this.elementInternals.role = 'tree';
   }
 
+  /** @internal */
   @observable
   childTreeItems: BaseTreeItem[] = [];
+  /** @internal */
   public childTreeItemsChanged() {
     this.updateCurrentSelected();
   }
@@ -261,4 +266,9 @@ export class BaseTree extends FASTElement {
       focusItem.focus();
     }
   }
+
+  /** @internal */
+  public handleDefaultSlotChange() {
+    this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
+  }
 }

packages/web-components/src/tree/tree.template.ts

@@ -1,5 +1,4 @@
-import { elements, html, slotted } from '@microsoft/fast-element';
-import { FluentDesignSystem } from '../fluent-design-system.js';
+import { html, ref } from '@microsoft/fast-element';
 import type { Tree } from './tree.js';
 
 export const template = html<Tree>`
@@ -11,11 +10,6 @@ export const template = html<Tree>`
     @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
     @change="${(x, c) => x.changeHandler(c.event)}"
   >
-    <slot
-      ${slotted({
-        property: 'childTreeItems',
-        filter: elements(`${FluentDesignSystem.prefix}-tree-item`),
-      })}
-    ></slot>
+    <slot ${ref('defaultSlot')} @slotchange="${x => x.handleDefaultSlotChange()}"></slot>
   </template>
 `;