diff --git a/CHANGELOG.md b/CHANGELOG.md
index d089856b..5937f3b0 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 e595f51a..8452687b 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 a2282dd9..59d2b7b7 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 7eff96b3..d6f1e2d6 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 4b71f992..06c46531 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() {