Fix slot listeners

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

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.

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);

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() {

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() {