diff --git a/CHANGELOG.md b/CHANGELOG.md
index d089856bf..5937f3b05 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Fixed a bug where options where `sl-select` options weren't always visible or scrollable
 - Fixed a bug where setting `null` on `sl-input`, `sl-textarea`, or `sl-select` would throw an error
 - Fixed a bug where `role` was on the wrong element and aria attribute weren't explicit in `sl-checkbox`, `sl-switch`, and `sl-radio`
+- Fixed a bug where dynamically adding/removing a slot wouldn't work as expected in `sl-card`, `sl-dialog`, and `sl-drawer`
 - Optimized `hasSlot` utility by using a simpler selector
 
 ## 2.0.0-beta.16
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e595f51ac..8452687bb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -178,3 +178,13 @@ To expose custom properties for a component, define them in the `:host` block an
   display: inline-block;
 }
 ```
+
+### Conditional Slots
+
+When a component relies on the presence of a slot to do something, don't assume the initial state of the component is its permanent state. Users can add and remove slotted content anytime, and components should be aware of this.
+
+- Create an `updateSlots` method that uses `hasSlot` (imported from `src/utilities/slot.ts`) to check for the required slot(s)
+- Listen on the host element for the `slotchange` event and run `updateSlots`
+- Don't conditionally render any slots — always use `hidden` or `display: none` so the slot exists in the DOM
+
+See the source of card, dialog, or drawer for examples.
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index a2282dd9c..59d2b7b74 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -29,6 +29,10 @@ export class Card {
   @State() hasImage = false;
   @State() hasHeader = false;
 
+  connectedCallback() {
+    this.updateSlots = this.updateSlots.bind(this);
+  }
+
   componentWillLoad() {
     this.updateSlots();
     this.host.shadowRoot.addEventListener('slotchange', this.updateSlots);
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
index 7eff96b3e..d6f1e2d67 100644
--- a/src/components/dialog/dialog.tsx
+++ b/src/components/dialog/dialog.tsx
@@ -77,6 +77,7 @@ export class Dialog {
     this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleOverlayClick = this.handleOverlayClick.bind(this);
+    this.updateSlots = this.updateSlots.bind(this);
   }
 
   componentWillLoad() {
diff --git a/src/components/drawer/drawer.tsx b/src/components/drawer/drawer.tsx
index 4b71f9924..06c465318 100644
--- a/src/components/drawer/drawer.tsx
+++ b/src/components/drawer/drawer.tsx
@@ -85,6 +85,7 @@ export class Drawer {
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleOverlayClick = this.handleOverlayClick.bind(this);
+    this.updateSlots = this.updateSlots.bind(this);
   }
 
   componentWillLoad() {