add disabled prop

docs/resources/changelog.md

@@ -6,6 +6,11 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Added the `disabled` prop to `<sl-resize-observer>`
+- Fixed a bug in `<sl-mutation-observer>` where setting `disabled` initially didn't work
+
 ## 2.0.0-beta.53
 
 - 🚨 BREAKING: removed `<sl-menu-divider>` (use `<sl-divider>` instead)

src/components/resize-observer/resize-observer.ts

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { emit } from '../../internal/event';
+import { watch } from '../../internal/watch';
 import styles from './resize-observer.styles';
 
 /**
@@ -18,31 +19,60 @@ export default class SlResizeObserver extends LitElement {
   private resizeObserver: ResizeObserver;
   private observedElements: HTMLElement[] = [];
 
+  /** Disables the observer. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
       emit(this, 'sl-resize', { detail: { entries } });
     });
+
+    if (!this.disabled) {
+      this.startObserver();
+    }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.resizeObserver.disconnect();
+    this.stopObserver();
   }
 
   handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+
+  startObserver() {
     const slot = this.shadowRoot!.querySelector('slot')!;
-    const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];
 
-    // Unwatch previous elements
-    this.observedElements.map(el => this.resizeObserver.unobserve(el));
-    this.observedElements = [];
+    if (slot) {
+      const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];
 
-    // Watch new elements
-    elements.map(el => {
-      this.resizeObserver.observe(el);
-      this.observedElements.push(el);
-    });
+      // Unwatch previous elements
+      this.observedElements.map(el => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+
+      // Watch new elements
+      elements.map(el => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
   }
 
   render() {