diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index d422e8085b..841b062ac1 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -3,7 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
 import { getTimeGivenProgression } from '../../';
 import { getIonMode } from '../../global/ionic-global';
 import { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
-import { clamp, raf } from '../../utils/helpers';
+import { clamp, getElementRoot, raf } from '../../utils/helpers';
 import { hapticImpact } from '../../utils/native/haptic';
 
 import { createPullingAnimation, createSnapBackAnimation, getRefresherAnimationType, handleScrollWhilePulling, handleScrollWhileRefreshing, setSpinnerOpacity, shouldUseNativeRefresher, transitionEndAsync, translateElement } from './refresher.utils';
@@ -272,9 +272,9 @@ export class Refresher implements ComponentInterface {
   }
 
   private async setupMDNativeRefresher(contentEl: HTMLIonContentElement, pullingSpinner: HTMLIonSpinnerElement, refreshingSpinner: HTMLIonSpinnerElement) {
-    const circle = pullingSpinner.shadowRoot!.querySelector('circle');
+    const circle = getElementRoot(pullingSpinner).querySelector('circle');
     const pullingRefresherIcon = this.el.querySelector('ion-refresher-content .refresher-pulling-icon') as HTMLElement;
-    const refreshingCircle = refreshingSpinner.shadowRoot!.querySelector('circle');
+    const refreshingCircle = getElementRoot(refreshingSpinner).querySelector('circle');
 
     if (circle !== null && refreshingCircle !== null) {
       writeTask(() => {
@@ -397,7 +397,7 @@ export class Refresher implements ComponentInterface {
     }
 
     this.scrollEl = await contentEl.getScrollElement();
-    this.backgroundContentEl = contentEl.shadowRoot!.querySelector('#background-content') as HTMLElement;
+    this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content') as HTMLElement;
 
     if (shouldUseNativeRefresher(this.el, getIonMode(this))) {
       this.setupNativeRefresher(contentEl);
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 52345d59e0..bf5b7d06e8 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -5,6 +5,19 @@ import { Side } from '../interface';
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
 
+/**
+ * Gets the root context of a shadow dom element
+ * On newer browsers this will be the shadowRoot,
+ * but for older browser this may just be the
+ * element itself.
+ *
+ * Useful for whenever you need to explicitly
+ * do "myElement.shadowRoot!.querySelector(...)".
+ */
+export const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {
+  return el.shadowRoot || fallback;
+};
+
 /**
  * Patched version of requestAnimationFrame that avoids ngzone
  * Use only when you know ngzone should not run