feat(element): added support for using slots as swiper wrappers (#7624)

Author: andreyoganesyan

src/core/events/onTouchStart.mjs

@@ -1,5 +1,5 @@
 import { getWindow, getDocument } from 'ssr-window';
-import { now } from '../../shared/utils.mjs';
+import { now, elementIsChildOf } from '../../shared/utils.mjs';
 
 // Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
 function closestElement(selector, base = this) {
@@ -67,7 +67,7 @@ export default function onTouchStart(event) {
   let targetEl = e.target;
 
   if (params.touchEventsTarget === 'wrapper') {
-    if (!swiper.wrapperEl.contains(targetEl)) return;
+    if (!elementIsChildOf(targetEl, swiper.wrapperEl)) return;
   }
   if ('which' in e && e.which === 3) return;
   if ('button' in e && e.button > 0) return;

src/shared/utils.mjs

@@ -203,7 +203,19 @@ function findElementsInElements(elements = [], selector = '') {
   return found;
 }
 function elementChildren(element, selector = '') {
-  return [...element.children].filter((el) => el.matches(selector));
+  const children = [...element.children];
+  if(element instanceof HTMLSlotElement) {
+    children.push(...element.assignedElements())
+  }
+
+  if(!selector) {
+    return children;
+  }
+  return children.filter((el) => el.matches(selector));
+}
+function elementIsChildOf(el, parent) {
+  const children = elementChildren(parent);
+  return children.includes(el);
 }
 function showWarning(text) {
   try {
@@ -343,6 +355,7 @@ export {
   findElementsInElements,
   createElement,
   elementChildren,
+  elementIsChildOf,
   elementOffset,
   elementPrevAll,
   elementNextAll,