Merge branch 'next' into animation-rework

docs/resources/changelog.md

@@ -17,6 +17,7 @@ The most elegant solution I found was to use the [Web Animations API](https://de
 - 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `sl-drawer`
 - 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `sl-tab-group`
 - Added the Animation Registry
+- Fixed a bug where removing `sl-dropdown` from the DOM and adding it back destroyed the popover reference [#443](https://github.com/shoelace-style/shoelace/issues/443)
 - Updated animations for `sl-alert`, `sl-dialog`, `sl-drawer` to use the Animation Registry instead of CSS transitions
 - Improved a11y by respecting `prefers-reduced-motion` for all show/hide animations
 

src/components/dropdown/dropdown.ts

@@ -95,24 +95,27 @@ export default class SlDropdown extends LitElement {
     if (!this.containingElement) {
       this.containingElement = this;
     }
+
+    // Create the popover after render
+    this.updateComplete.then(() => {
+      this.popover = new Popover(this.trigger, this.positioner, {
+        strategy: this.hoist ? 'fixed' : 'absolute',
+        placement: this.placement,
+        distance: this.distance,
+        skidding: this.skidding,
+        transitionElement: this.panel,
+        onAfterHide: () => this.slAfterHide.emit(),
+        onAfterShow: () => this.slAfterShow.emit(),
+        onTransitionEnd: () => {
+          if (!this.open) {
+            this.panel.scrollTop = 0;
+          }
+        }
+      });
+    });
   }
 
   firstUpdated() {
-    this.popover = new Popover(this.trigger, this.positioner, {
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-      transitionElement: this.panel,
-      onAfterHide: () => this.slAfterHide.emit(),
-      onAfterShow: () => this.slAfterShow.emit(),
-      onTransitionEnd: () => {
-        if (!this.open) {
-          this.panel.scrollTop = 0;
-        }
-      }
-    });
-
     // Show on init if open
     if (this.open) {
       this.show();