optional chain disconnects; fixes #2127 (#2129)

docs/pages/resources/changelog.md

@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127]
+
 ## 2.16.0
 
 - Added the Czech translation [#2084]

src/components/carousel/carousel.component.ts

@@ -103,7 +103,7 @@ export default class SlCarousel extends ShoelaceElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
-    this.mutationObserver.disconnect();
+    this.mutationObserver?.disconnect();
   }
 
   protected firstUpdated(): void {

src/components/details/details.component.ts

@@ -89,7 +89,7 @@ export default class SlDetails extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.detailsObserver.disconnect();
+    this.detailsObserver?.disconnect();
   }
 
   private handleSummaryClick(event: MouseEvent) {

src/components/range/range.component.ts

@@ -132,7 +132,7 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this.input);
+    this.resizeObserver?.unobserve(this.input);
   }
 
   private handleChange() {

src/components/split-panel/split-panel.component.ts

@@ -85,7 +85,7 @@ export default class SlSplitPanel extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.unobserve(this);
+    this.resizeObserver?.unobserve(this);
   }
 
   private detectSize() {

src/components/tab-group/tab-group.component.ts

@@ -120,8 +120,8 @@ export default class SlTabGroup extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.mutationObserver.disconnect();
-    this.resizeObserver.unobserve(this.nav);
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.unobserve(this.nav);
   }
 
   private getAllTabs() {

src/components/textarea/textarea.component.ts

@@ -164,7 +164,7 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.input) {
-      this.resizeObserver.unobserve(this.input);
+      this.resizeObserver?.unobserve(this.input);
     }
   }
 

src/components/tree/tree.component.ts

@@ -111,8 +111,7 @@ export default class SlTree extends ShoelaceElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-
-    this.mutationObserver.disconnect();
+    this.mutationObserver?.disconnect();
   }
 
   // Generates a clone of the expand icon element to use for each tree item