diff --git a/src/SideEffect.tsx b/src/SideEffect.tsx
index 4a6264d..4ba1650 100644
--- a/src/SideEffect.tsx
+++ b/src/SideEffect.tsx
@@ -26,7 +26,7 @@ let idCounter = 0;
 let lockStack: any[] = [];
 
 export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
-  const shouldPreventQueue = React.useRef<Array<{ name: string; delta: number[]; target: any; should: boolean }>>([]);
+  const shouldPreventQueue = React.useRef<Array<{ name: string; delta: number[]; target: any; should: boolean; shadowParent?: HTMLElement | null }>>([]);
   const touchStartRef = React.useRef([0, 0]);
   const activeAxis = React.useRef<Axis | undefined>();
   const [id] = React.useState(idCounter++);
@@ -114,7 +114,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
 
     const delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event);
     const sourceEvent = shouldPreventQueue.current.filter(
-      (e) => e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta)
+      (e) => e.name === event.type && (e.target === event.target || event.target === e.shadowParent) && deltaCompare(e.delta, delta)
     )[0];
 
     // self event, and should be canceled
@@ -145,7 +145,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
   }, []);
 
   const shouldCancel = React.useCallback((name: string, delta: number[], target: any, should: boolean) => {
-    const event = { name, delta, target, should };
+    const event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
 
     setTimeout(() => {
@@ -197,3 +197,15 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
     </React.Fragment>
   );
 }
+
+function getOutermostShadowParent(node: Node | null): HTMLElement | null {
+  let shadowParent: HTMLElement | null = null;
+  while (node !== null) {
+    if (node instanceof ShadowRoot) {
+      shadowParent = node.host as HTMLElement;
+      node = node.host;
+    }
+    node = node.parentNode;
+  }
+  return shadowParent
+}
diff --git a/src/handleScroll.ts b/src/handleScroll.ts
index 21581f9..c2bf468 100644
--- a/src/handleScroll.ts
+++ b/src/handleScroll.ts
@@ -90,6 +90,9 @@ export const handleScroll = (
   let availableScrollTop = 0;
 
   do {
+    if (target instanceof ShadowRoot) {
+      target = target.host as HTMLElement;
+    }
     const [position, scroll, capacity] = getScrollVariables(axis, target);
 
     const elementScroll = scroll - capacity - directionFactor * position;