fixes #357

docs/resources/changelog.md

@@ -14,6 +14,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where toggling `open` on `sl-drawer` would skip the transition
 - Fixed a bug where `sl-color-picker` could be opened when disabled
 - Fixed a bug in `sl-color-picker` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
+- Fixed a bug where `sl-details` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
 - Renamed `components.json` to `metadata.json`
 - Updated to the prerelease versions of LitElement and lit-html
 - Updated to Bootstrap Icons 1.4.1

src/components/details/details.ts

@@ -54,15 +54,16 @@ export default class SlDetails extends LitElement {
   /** Emitted after the details closes and all transitions are complete. */
   @event('after-hide') slAfterHide: EventEmitter<void>;
 
+  connectedCallback() {
+    super.connectedCallback();
+    this.isVisible = this.open;
+  }
+
   firstUpdated() {
     focusVisible.observe(this.details);
 
     this.body.hidden = !this.open;
-
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
+    this.body.style.height = this.open ? 'auto' : '0';
   }
 
   disconnectedCallback() {