fix(core) - improve nested shadow component with no swiping class (#4732

)

src/components/core/events/onTouchStart.js

@@ -2,6 +2,17 @@ import { getWindow, getDocument } from 'ssr-window';
 import $ from '../../../utils/dom';
 import { extend, now } from '../../../utils/utils';
 
+// Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
+function closestElement(selector, base = this) {
+  function __closestFrom(el) {
+    if (!el || el === getDocument() || el === getWindow()) return null;
+    if (el.assignedSlot) el = el.assignedSlot;
+    const found = el.closest(selector);
+    return found || __closestFrom(el.getRootNode().host);
+  }
+  return __closestFrom(base);
+}
+
 export default function onTouchStart(event) {
   const swiper = this;
   const document = getDocument();
@@ -32,11 +43,17 @@ export default function onTouchStart(event) {
     $targetEl = $(event.path[0]);
   }
 
+  const noSwipingSelector = params.noSwipingSelector
+    ? params.noSwipingSelector
+    : `.${params.noSwipingClass}`;
+  const isTargetShadow = !!(e.target && e.target.shadowRoot);
+
+  // use closestElement for shadow root element to get the actual closest for nested shadow root element
   if (
     params.noSwiping &&
-    $targetEl.closest(
-      params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`,
-    )[0]
+    (isTargetShadow
+      ? closestElement(noSwipingSelector, e.target)
+      : $targetEl.closest(noSwipingSelector)[0])
   ) {
     swiper.allowClick = true;
     return;