@ionic/core 7.5.7-dev.11701270755.14f050ad → 7.5.7-dev.11701273756.1eb73d4c

package/dist/collection/components/toast/test/toast-config.spec.js

@@ -0,0 +1,25 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Toast } from "../toast";
+import { config } from "../../../global/config";
+describe('toast: duration config', () => {
+  it('should have duration set to 0', async () => {
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    expect(toast.duration).toBe(0);
+  });
+  it('should have duration set to 5000', async () => {
+    config.reset({ toastDuration: 5000 });
+    const page = await newSpecPage({
+      components: [Toast],
+      html: `<ion-toast></ion-toast>`,
+    });
+    const toast = page.body.querySelector('ion-toast');
+    expect(toast.duration).toBe(5000);
+  });
+});

package/dist/collection/components/toast/test/toast.spec.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { config } from "../../../global/config";
+import { createAnimation } from "../../../utils/animation/animation";
 import { Toast } from "../toast";
 describe('toast: custom html', () => {
   it('should not allow for custom html by default', async () => {
@@ -118,3 +119,82 @@ describe('toast: button cancel', () => {
     expect(buttonCancel.getAttribute('part')).toBe('button cancel');
   });
 });
+describe('toast: swipe gesture', () => {
+  describe('prefersSwipeGesture()', () => {
+    let toast;
+    beforeEach(() => {
+      toast = new Toast();
+    });
+    it('should return true if set to a valid swipe value', () => {
+      toast.swipeGesture = 'vertical';
+      expect(toast.prefersSwipeGesture()).toBe(true);
+    });
+    it('should return false if set to undefined', () => {
+      toast.swipeGesture = undefined;
+      expect(toast.prefersSwipeGesture()).toBe(false);
+    });
+    it('should return false if set to null', () => {
+      toast.swipeGesture = null;
+      expect(toast.prefersSwipeGesture()).toBe(false);
+    });
+    it('should return false if set to invalid string', () => {
+      toast.swipeGesture = 'limit'; // `'limit'` doesn't exist
+      expect(toast.prefersSwipeGesture()).toBe(false);
+    });
+  });
+  describe('swipeGesture property', () => {
+    let toast;
+    beforeEach(() => {
+      toast = new Toast();
+      // Stub the enter animation so we aren't querying elements in the DOM that may not exist
+      toast.enterAnimation = () => createAnimation();
+    });
+    it('should not create a swipe gesture on present if swipeGesture is undefined', async () => {
+      expect(toast.gesture).toBe(undefined);
+      await toast.present();
+      expect(toast.gesture).toBe(undefined);
+    });
+    it('should create a swipe gesture on present', async () => {
+      toast.swipeGesture = 'vertical';
+      expect(toast.gesture).toBe(undefined);
+      await toast.present();
+      expect(toast.gesture).not.toBe(undefined);
+    });
+    it('should destroy a swipe gesture on dismiss', async () => {
+      toast.swipeGesture = 'vertical';
+      await toast.present();
+      expect(toast.gesture).not.toBe(undefined);
+      await toast.dismiss();
+      expect(toast.gesture).toBe(undefined);
+    });
+    it('should create a swipe gesture if swipeGesture is set after present', async () => {
+      await toast.present();
+      expect(toast.gesture).toBe(undefined);
+      /**
+       * Manually invoke the watch
+       * callback synchronously.
+       */
+      toast.swipeGesture = 'vertical';
+      toast.swipeGestureChanged();
+      expect(toast.gesture).not.toBe(undefined);
+    });
+    it('should destroy a swipe gesture if swipeGesture is cleared after present', async () => {
+      toast.swipeGesture = 'vertical';
+      await toast.present();
+      expect(toast.gesture).not.toBe(undefined);
+      /**
+       * Manually invoke the watch
+       * callback synchronously.
+       */
+      toast.swipeGesture = undefined;
+      toast.swipeGestureChanged();
+      expect(toast.gesture).toBe(undefined);
+    });
+    it('should not create a swipe gesture if the toast is not presented', async () => {
+      expect(toast.gesture).toBe(undefined);
+      toast.swipeGesture = 'vertical';
+      toast.swipeGestureChanged();
+      expect(toast.gesture).toBe(undefined);
+    });
+  });
+});

package/dist/collection/components/toast/toast.ios.css

@@ -189,6 +189,16 @@
   }
 }
 
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;
   align-items: center;
@@ -343,20 +353,10 @@
     background: rgba(var(--ion-color-base-rgb), 0.8);
   }
 }
-.toast-wrapper.toast-top {
-  transform: translate3d(0,  -100%,  0);
-  top: 0;
-}
-
 .toast-wrapper.toast-middle {
   opacity: 0.01;
 }
 
-.toast-wrapper.toast-bottom {
-  transform: translate3d(0,  100%,  0);
-  bottom: 0;
-}
-
 .toast-content {
   -webkit-padding-start: 15px;
   padding-inline-start: 15px;

package/dist/collection/components/toast/toast.js

@@ -6,7 +6,7 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -16,6 +16,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { getAnimationPosition } from "./animations/utils";
+import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -41,6 +42,41 @@ export class Toast {
         this.callButtonHandler(cancelButton);
       }
     };
+    /**
+     * Create a new swipe gesture so Toast
+     * can be swiped to dismiss.
+     */
+    this.createSwipeGesture = (toastPosition) => {
+      const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
+        /**
+         * If the gesture completed then
+         * we should dismiss the toast.
+         */
+        this.dismiss(undefined, GESTURE);
+      }));
+      gesture.enable(true);
+    };
+    /**
+     * Destroy an existing swipe gesture
+     * so Toast can no longer be swiped to dismiss.
+     */
+    this.destroySwipeGesture = () => {
+      const { gesture } = this;
+      if (gesture === undefined) {
+        return;
+      }
+      gesture.destroy();
+      this.gesture = undefined;
+    };
+    /**
+     * Returns `true` if swipeGesture
+     * is configured to a value that enables the swipe behavior.
+     * Returns `false` otherwise.
+     */
+    this.prefersSwipeGesture = () => {
+      const { swipeGesture } = this;
+      return swipeGesture === 'vertical';
+    };
     this.revealContentToScreenReader = false;
     this.overlayIndex = undefined;
     this.delegate = undefined;
@@ -61,9 +97,37 @@ export class Toast {
     this.animated = true;
     this.icon = undefined;
     this.htmlAttributes = undefined;
+    this.swipeGesture = undefined;
     this.isOpen = false;
     this.trigger = undefined;
   }
+  swipeGestureChanged() {
+    /**
+     * If the Toast is presented, then we need to destroy
+     * any actives gestures before a new gesture is potentially
+     * created below.
+     *
+     * If the Toast is dismissed, then no gesture should be available
+     * since the Toast is not visible. This case should never
+     * happen since the "dismiss" method handles destroying
+     * any active swipe gestures, but we keep this code
+     * around to handle the first case.
+     */
+    this.destroySwipeGesture();
+    /**
+     * A new swipe gesture should only be created
+     * if the Toast is presented. If the Toast is not
+     * yet presented then the "present" method will
+     * handle calling the swipe gesture setup function.
+     */
+    if (this.presented && this.prefersSwipeGesture()) {
+      /**
+       * If the Toast is presented then
+       * lastPresentedPosition is defined.
+       */
+      this.createSwipeGesture(this.lastPresentedPosition);
+    }
+  }
   onIsOpenChange(newValue, oldValue) {
     if (newValue === true && oldValue === false) {
       this.present();
@@ -125,6 +189,14 @@ export class Toast {
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
+    /**
+     * If the Toast has a swipe gesture then we can
+     * create the gesture so users can swipe the
+     * presented Toast.
+     */
+    if (this.prefersSwipeGesture()) {
+      this.createSwipeGesture(animationPosition);
+    }
     unlock();
   }
   /**
@@ -159,6 +231,11 @@ export class Toast {
       this.revealContentToScreenReader = false;
     }
     this.lastPresentedPosition = undefined;
+    /**
+     * If the Toast has a swipe gesture then we can
+     * safely destroy it now that it is dismissed.
+     */
+    this.destroySwipeGesture();
     unlock();
     return dismissed;
   }
@@ -699,6 +776,29 @@ export class Toast {
           "text": "Additional attributes to pass to the toast."
         }
       },
+      "swipeGesture": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ToastSwipeGestureDirection",
+          "resolved": "\"vertical\" | undefined",
+          "references": {
+            "ToastSwipeGestureDirection": {
+              "location": "import",
+              "path": "./toast-interface",
+              "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
+        },
+        "attribute": "swipe-gesture",
+        "reflect": false
+      },
       "isOpen": {
         "type": "boolean",
         "mutable": false,
@@ -1009,6 +1109,9 @@ export class Toast {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "swipeGesture",
+        "methodName": "swipeGestureChanged"
+      }, {
         "propName": "isOpen",
         "methodName": "onIsOpenChange"
       }, {

package/dist/collection/components/toast/toast.md.css

@@ -189,6 +189,16 @@
   }
 }
 
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;
   align-items: center;

package/dist/collection/components/toggle/toggle.js

@@ -123,6 +123,8 @@ export class Toggle {
     if (this.legacyFormController.hasLegacyControl()) {
       this.ionStyle.emit({
         'interactive-disabled': this.disabled,
+        // TODO(FW-2990): remove this
+        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/utils/animation/animation.js

@@ -463,6 +463,16 @@ export const createAnimation = (animationId) => {
         }
       }
     });
+    /**
+     * Clean up any value coercion before
+     * the user callbacks fire otherwise
+     * they may get stale values. For example,
+     * if someone calls progressStart(0) the
+     * animation may still be reversed.
+     */
+    forceDurationValue = undefined;
+    forceDirectionValue = undefined;
+    forceDelayValue = undefined;
     onFinishCallbacks.forEach((onFinishCallback) => {
       return onFinishCallback.c(currentStep, ani);
     });
@@ -667,17 +677,8 @@ export const createAnimation = (animationId) => {
         update(false, false);
       }
     }
-    if (playTo !== undefined) {
-      onFinish(() => {
-        forceDurationValue = undefined;
-        forceDirectionValue = undefined;
-        forceDelayValue = undefined;
-      }, {
-        oneTimeCallback: true,
-      });
-      if (!parentAnimation) {
-        play();
-      }
+    if (playTo !== undefined && !parentAnimation) {
+      play();
     }
     return ani;
   };

package/dist/collection/utils/animation/test/animation.spec.js

@@ -5,6 +5,22 @@ import { createAnimation } from "../animation";
 import { processKeyframes } from "../animation-utils";
 import { getTimeGivenProgression } from "../cubic-bezier";
 describe('Animation Class', () => {
+  describe('progressEnd callbacks', () => {
+    test('coerced state should be reset before onFinish runs', (done) => {
+      const el = document.createElement('div');
+      const animation = createAnimation()
+        .addElement(el)
+        .fromTo('transform', 'translateX(0px)', 'translateX(100px)')
+        .duration(50);
+      animation
+        .onFinish(() => {
+        expect(animation.getDirection()).toBe('normal');
+        expect(animation.getDuration()).toBe(50);
+        done();
+      })
+        .progressEnd(0, 0.5, 10);
+    });
+  });
   describe('play()', () => {
     it('should resolve when the animation is cancelled', async () => {
       // Tell Jest to expect 1 assertion for async code

package/dist/collection/utils/browser/index.js

@@ -1,27 +1,5 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-/**
- * When accessing the document or window, it is important
- * to account for SSR applications where the
- * window is not available. Code that accesses
- * window when it is not available will crash.
- * Even checking if `window === undefined` will cause
- * apps to crash in SSR.
- *
- * Use win below to access an SSR-safe version
- * of the window.
- *
- * Example 1:
- * Before:
- * if (window.innerWidth > 768) { ... }
- *
- * After:
- * import { win } from 'path/to/this/file';
- * if (win?.innerWidth > 768) { ... }
- *
- * Note: Code inside of this if-block will
- * not run in an SSR environment.
- */
 export const win = typeof window !== 'undefined' ? window : undefined;
 export const doc = typeof document !== 'undefined' ? document : undefined;

package/dist/collection/utils/forms/compare-with-utils.js

@@ -0,0 +1,39 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+export const compareOptions = (currentValue, compareValue, compareWith) => {
+  if (typeof compareWith === 'function') {
+    return compareWith(currentValue, compareValue);
+  }
+  else if (typeof compareWith === 'string') {
+    return currentValue[compareWith] === compareValue[compareWith];
+  }
+  else {
+    return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+  }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+export const isOptionSelected = (currentValue, compareValue, compareWith) => {
+  if (currentValue === undefined) {
+    return false;
+  }
+  if (Array.isArray(currentValue)) {
+    return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+  }
+  else {
+    return compareOptions(currentValue, compareValue, compareWith);
+  }
+};

package/dist/collection/utils/forms/index.js

@@ -3,3 +3,4 @@
  */
 export * from './form-controller';
 export * from './notch-controller';
+export * from './compare-with-utils';

package/dist/collection/utils/gesture/gesture-controller.js

@@ -189,5 +189,5 @@ class BlockerDelegate {
     this.ctrl = undefined;
   }
 }
-export const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
+const BACKDROP_NO_SCROLL = 'backdrop-no-scroll';
 export const GESTURE_CONTROLLER = new GestureController();

package/dist/collection/utils/input-shims/input-shims.js

@@ -1,6 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import { doc } from "../browser/index";
 import { findClosestIonContent } from "../content";
 import { componentOnReady } from "../helpers";
 import { Keyboard } from "../native/keyboard";
@@ -11,7 +12,13 @@ const INPUT_BLURRING = true;
 const SCROLL_ASSIST = true;
 const HIDE_CARET = true;
 export const startInputShims = async (config, platform) => {
-  const doc = document;
+  /**
+   * If doc is undefined then we are in an SSR environment
+   * where input shims do not apply.
+   */
+  if (doc === undefined) {
+    return;
+  }
   const isIOS = platform === 'ios';
   const isAndroid = platform === 'android';
   /**
@@ -90,11 +97,10 @@ export const startInputShims = async (config, platform) => {
   for (const input of inputs) {
     registerInput(input);
   }
-  // TODO(FW-2832): types
-  doc.addEventListener('ionInputDidLoad', ((ev) => {
+  doc.addEventListener('ionInputDidLoad', (ev) => {
     registerInput(ev.detail);
-  }));
-  doc.addEventListener('ionInputDidUnload', ((ev) => {
+  });
+  doc.addEventListener('ionInputDidUnload', (ev) => {
     unregisterInput(ev.detail);
-  }));
+  });
 };

package/dist/collection/utils/menu-controller/index.js

@@ -1,8 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { printIonWarning } from "../logging/index";
+import { doc } from "../browser/index";
 import { MENU_BACK_BUTTON_PRIORITY } from "../hardware-back-button";
+import { printIonWarning } from "../logging/index";
 import { componentOnReady } from "../helpers";
 import { menuOverlayAnimation } from "./animations/overlay";
 import { menuPushAnimation } from "./animations/push";
@@ -184,17 +185,14 @@ const createMenuController = () => {
   registerAnimation('reveal', menuRevealAnimation);
   registerAnimation('push', menuPushAnimation);
   registerAnimation('overlay', menuOverlayAnimation);
-  if (typeof document !== 'undefined') {
-    document.addEventListener('ionBackButton', (ev) => {
-      // TODO(FW-2832): type
-      const openMenu = _getOpenSync();
-      if (openMenu) {
-        ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
-          return openMenu.close();
-        });
-      }
-    });
-  }
+  doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
+    const openMenu = _getOpenSync();
+    if (openMenu) {
+      ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+        return openMenu.close();
+      });
+    }
+  });
   return {
     registerAnimation,
     get,

package/dist/collection/utils/overlays.js

@@ -5,7 +5,6 @@ import { doc } from "./browser/index";
 import { config } from "../global/config";
 import { getIonMode } from "../global/ionic-global";
 import { CoreDelegate } from "./framework-delegate";
-import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusElement, getElementRoot, removeEventListener } from "./helpers";
 import { printIonWarning } from "./logging";
@@ -29,10 +28,7 @@ export const alertController = /*@__PURE__*/ createController('ion-alert');
 export const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
 export const loadingController = /*@__PURE__*/ createController('ion-loading');
 export const modalController = /*@__PURE__*/ createController('ion-modal');
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-export const pickerController = /*@__PURE__*/ createController('ion-picker-legacy');
+export const pickerController = /*@__PURE__*/ createController('ion-picker');
 export const popoverController = /*@__PURE__*/ createController('ion-popover');
 export const toastController = /*@__PURE__*/ createController('ion-toast');
 /**
@@ -142,7 +138,7 @@ const focusLastDescendant = (ref, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
+  const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover');
   const target = ev.target;
   /**
    * If no active overlay, ignore this event.
@@ -327,7 +323,7 @@ export const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 export const getOverlays = (doc, selector) => {
   if (selector === undefined) {
-    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
+    selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker,ion-popover,ion-toast';
   }
   return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -393,7 +389,6 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
     return;
   }
   setRootAriaHidden(true);
-  document.body.classList.add(BACKDROP_NO_SCROLL);
   overlay.presented = true;
   overlay.willPresent.emit();
   (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -456,14 +451,12 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
   if (!overlay.presented) {
     return false;
   }
-  const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
   /**
    * If this is the last visible overlay then
    * we want to re-add the root to the accessibility tree.
    */
-  if (lastOverlay) {
+  if (doc !== undefined && getPresentedOverlays(doc).length === 1) {
     setRootAriaHidden(false);
-    document.body.classList.remove(BACKDROP_NO_SCROLL);
   }
   overlay.presented = false;
   try {
@@ -569,6 +562,7 @@ export const safeCall = (handler, arg) => {
 };
 export const BACKDROP = 'backdrop';
 export const GESTURE = 'gesture';
+export const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *

package/dist/collection/utils/slot-mutation-controller.js

@@ -9,13 +9,14 @@ import { raf } from "./helpers";
  * This is not needed for components using native slots in the Shadow DOM.
  * @internal
  * @param el The host element to observe
- * @param slotName mutationCallback will fire when nodes on this slot change
+ * @param slotName mutationCallback will fire when nodes on these slot(s) change
  * @param mutationCallback The callback to fire whenever the slotted content changes
  */
 export const createSlotMutationController = (el, slotName, mutationCallback) => {
   let hostMutationObserver;
   let slottedContentMutationObserver;
   if (win !== undefined && 'MutationObserver' in win) {
+    const slots = Array.isArray(slotName) ? slotName : [slotName];
     hostMutationObserver = new MutationObserver((entries) => {
       for (const entry of entries) {
         for (const node of entry.addedNodes) {
@@ -23,7 +24,7 @@ export const createSlotMutationController = (el, slotName, mutationCallback) =>
            * Check to see if the added node
            *  is our slotted content.
            */
-          if (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) {
+          if (node.nodeType === Node.ELEMENT_NODE && slots.includes(node.slot)) {
             /**
              * If so, we want to watch the slotted
              * content itself for changes. This lets us