fix: add optional swiperElementNodeName param to allow more flexible web component usage (#7284)

Author: sghoweri

src/components-shared/params-list.mjs

@@ -7,6 +7,7 @@ const paramsList = [
   'init',
   '_direction',
   'oneWayMovement',
+  'swiperElementNodeName',
   'touchEventsTarget',
   'initialSlide',
   '_speed',

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;
     }
 

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,

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;

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)
    *

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 },