fixes #871

docs/resources/changelog.md

@@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug in `<sl-popup>` that prevented flip fallbacks from working as intended
 - Fixed a bug that caused concurrent animations to work incorrectly when the durations were different [#867](https://github.com/shoelace-style/shoelace/issues/867)
 - Fixed a bug in `<sl-color-picker>` that caused the trigger and color preview to ignore opacity on first render [#869](https://github.com/shoelace-style/shoelace/issues/869)
+- Fixed a bug in `<sl-tree>` that prevented the keyboard from working when the component was nested in a shadow root [#871](https://github.com/shoelace-style/shoelace/issues/871)
 - Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label
 - Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `<sl-tree>` and `<sl-tree-item>` components
 - Improved RTL support for `<sl-image-comparer>`

src/components/tree/tree.ts

@@ -228,7 +228,7 @@ export default class SlTree extends ShoelaceElement {
 
     if (items.length > 0) {
       event.preventDefault();
-      const activeItemIndex = items.findIndex(item => document.activeElement === item);
+      const activeItemIndex = items.findIndex(item => item.matches(':focus'));
       const activeItem: SlTreeItem | undefined = items[activeItemIndex];
 
       const focusItemAt = (index: number) => {