Use disconnectedCallback instead of componentDidUnload; fixes #161

src/components/card/card.tsx

@@ -34,8 +34,9 @@ export class Card {
     this.host.shadowRoot.addEventListener('slotchange', this.updateSlots);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.host.shadowRoot.removeEventListener('slotchange', this.updateSlots);
+    console.log('cleanup');
   }
 
   updateSlots() {

src/components/details/details.tsx

@@ -69,7 +69,7 @@ export class Details {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     focusVisible.unobserve(this.details);
   }
 

src/components/dialog/dialog.tsx

@@ -90,7 +90,7 @@ export class Dialog {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     unlockBodyScrolling(this.host);
 
     this.host.shadowRoot.removeEventListener('slotchange', this.updateSlots);

src/components/drawer/drawer.tsx

@@ -98,7 +98,7 @@ export class Drawer {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     unlockBodyScrolling(this.host);
 
     this.host.shadowRoot.removeEventListener('slotchange', this.updateSlots);

src/components/dropdown/dropdown.tsx

@@ -118,7 +118,7 @@ export class Dropdown {
     }
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.hide();
     this.popover.destroy();
   }

src/components/icon-button/icon-button.tsx

@@ -32,7 +32,7 @@ export class IconButton {
     focusVisible.observe(this.button);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     focusVisible.unobserve(this.button);
   }
 

src/components/rating/rating.tsx

@@ -74,7 +74,7 @@ export class Rating {
     focusVisible.observe(this.rating);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     focusVisible.unobserve(this.rating);
   }
 

src/components/select/select.tsx

@@ -121,7 +121,7 @@ export class Select {
     requestAnimationFrame(() => this.syncItemsFromValue());
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.menu.querySelector('slot').removeEventListener('slotchange', this.handleSlotChange);
   }
 

src/components/tab-group/tab-group.tsx

@@ -88,7 +88,7 @@ export class TabGroup {
     this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.mutationObserver.disconnect();
     focusVisible.unobserve(this.tabGroup);
     this.resizeObserver.unobserve(this.nav);

src/components/textarea/textarea.tsx

@@ -114,7 +114,7 @@ export class Textarea {
     this.resizeObserver.observe(this.textarea);
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.resizeObserver.unobserve(this.textarea);
   }
 

src/components/tooltip/tooltip.tsx

@@ -114,7 +114,7 @@ export class Tooltip {
     this.syncOptions();
   }
 
-  componentDidUnload() {
+  disconnectedCallback() {
     this.popover.destroy();
 
     this.host.removeEventListener('blur', this.handleBlur, true);