fix(tree, tree-item): works when tree is the topmost element in a shadow root where it has no parent

src/components/tree-item/tree-item.tsx

@@ -129,7 +129,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
-    this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
+    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item");
     if (this.parentTreeItem) {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
@@ -144,7 +144,6 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   componentWillRender(): void {
     this.hasChildren = !!this.el.querySelector("calcite-tree");
     this.depth = 0;
-
     let parentTree = this.el.closest("calcite-tree");
 
     if (!parentTree) {
@@ -157,7 +156,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
     let nextParentTree;
     while (parentTree) {
-      nextParentTree = parentTree.parentElement.closest("calcite-tree");
+      nextParentTree = parentTree.parentElement?.closest("calcite-tree");
       if (nextParentTree === parentTree) {
         break;
       } else {
@@ -410,7 +409,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
       let parent = this.parentTreeItem;
       while (parent) {
         ancestors.push(parent);
-        parent = parent.parentElement.closest("calcite-tree-item");
+        parent = parent.parentElement?.closest("calcite-tree-item");
       }
       ancestors.forEach((item) => (item.indeterminate = true));
       return;

src/components/tree/tree.e2e.ts

@@ -904,5 +904,50 @@ describe("calcite-tree", () => {
 
       expect(await getActiveElementId(page)).toEqual("child-1");
     });
+
+    it("renders when tree is in the root node (there is no parent)", async () => {
+      const templateHTML = html` <template id="test-tree-element-template">
+        <calcite-tree>
+          <calcite-tree-item>Child 1</calcite-tree-item>
+          <calcite-tree-item>
+            Child 2
+            <calcite-tree slot="children">
+              <calcite-tree-item>Grandchild 1</calcite-tree-item>
+              <calcite-tree slot="children">
+                Grandchild 2
+                <calcite-tree-item>Great-grandchild 1</calcite-tree-item>
+                <calcite-tree-item>Great-grandchild 2</calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree>
+          </calcite-tree-item>
+          <calcite-tree-item id="three">3</calcite-tree-item>
+        </calcite-tree>
+      </template>`;
+
+      const page = await newE2EPage();
+      await page.setContent(html`${templateHTML} <test-tree-element></test-tree-element>`);
+      await page.waitForChanges();
+
+      await page.evaluate(async (): Promise<string> => {
+        customElements.define(
+          "test-tree-element",
+          class extends HTMLElement {
+            constructor() {
+              super();
+            }
+
+            connectedCallback() {
+              this.attachShadow({ mode: "open" }).appendChild(
+                (document.getElementById("test-tree-element-template") as HTMLTemplateElement).content.cloneNode(true)
+              );
+            }
+          }
+        );
+        return null;
+      });
+      await page.waitForChanges();
+
+      renders("calcite-tree", { display: "block" });
+    });
   });
 });

src/components/tree/tree.tsx

@@ -72,7 +72,7 @@ export class Tree {
   //--------------------------------------------------------------------------
 
   componentWillRender(): void {
-    const parent: HTMLCalciteTreeElement = this.el.parentElement.closest("calcite-tree");
+    const parent: HTMLCalciteTreeElement = this.el.parentElement?.closest("calcite-tree");
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
@@ -283,7 +283,7 @@ export class Tree {
       }
 
       // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-      const parentItem = target.parentElement.closest("calcite-tree-item");
+      const parentItem = target.parentElement?.closest("calcite-tree-item");
 
       if (parentItem && (!target.hasChildren || target.expanded === false)) {
         parentItem.focus();
@@ -320,10 +320,10 @@ export class Tree {
     }
 
     const ancestors: HTMLCalciteTreeItemElement[] = [];
-    let parent = item.parentElement.closest<HTMLCalciteTreeItemElement>("calcite-tree-item");
+    let parent = item.parentElement?.closest<HTMLCalciteTreeItemElement>("calcite-tree-item");
     while (parent) {
       ancestors.push(parent);
-      parent = parent.parentElement.closest<HTMLCalciteTreeItemElement>("calcite-tree-item");
+      parent = parent.parentElement?.closest<HTMLCalciteTreeItemElement>("calcite-tree-item");
     }
 
     const childItems = Array.from(