fix: add optional swiperElementNodeName param to allow more flexible …

…web component usage (#7284)
nolimits4web · Feb 5, 2024 · 178511f · 178511f
1 parent 76355b8
commit 178511f
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 1 deletion.
diff --git a/src/components-shared/params-list.mjs b/src/components-shared/params-list.mjs
@@ -7,6 +7,7 @@ const paramsList = [
   'init',
   '_direction',
   'oneWayMovement',
+  'swiperElementNodeName',
   'touchEventsTarget',
   'initialSlide',
   '_speed',

diff --git a/src/core/core.mjs b/src/core/core.mjs
@@ -504,7 +504,7 @@ class Swiper {
     }
 
     el.swiper = swiper;
-    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
+    if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === swiper.params.swiperElementNodeName.toUpperCase()) {
       swiper.isElement = true;
     }
 

diff --git a/src/core/defaults.mjs b/src/core/defaults.mjs
@@ -2,6 +2,7 @@ export default {
   init: true,
   direction: 'horizontal',
   oneWayMovement: false,
+  swiperElementNodeName: 'SWIPER-CONTAINER',
   touchEventsTarget: 'wrapper',
   initialSlide: 0,
   speed: 300,

diff --git a/src/swiper-vue.d.ts b/src/swiper-vue.d.ts
@@ -51,6 +51,10 @@ declare const Swiper: DefineComponent<
       type: PropType<SwiperOptions['oneWayMovement']>;
       default: SwiperOptions['oneWayMovement'];
     };
+    swiperElementNodeName: {
+      type: PropType<SwiperOptions['swiperElementNodeName']>;
+      default: SwiperOptions['swiperElementNodeName'];
+    };
     touchEventsTarget: {
       type: PropType<SwiperOptions['touchEventsTarget']>;
       default: undefined;

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -100,6 +100,13 @@ export interface SwiperOptions {
 
   oneWayMovement?: boolean;
 
+  /**
+   * The name of the swiper element node name; used for detecting web component rendering
+   *
+   * @default 'SWIPER-CONTAINER'
+   */
+  swiperElementNodeName?: string;
+
   /**
    * Duration of transition between slides (in ms)
    *

diff --git a/src/vue/swiper.mjs b/src/vue/swiper.mjs
@@ -31,6 +31,7 @@ const Swiper = {
     init: { type: Boolean, default: undefined },
     direction: { type: String, default: undefined },
     oneWayMovement: { type: Boolean, default: undefined },
+    swiperElementNodeName: { type: String, default: 'SWIPER-CONTAINER' },
     touchEventsTarget: { type: String, default: undefined },
     initialSlide: { type: Number, default: undefined },
     speed: { type: Number, default: undefined },