Pointer events are ignored when using nested web components as slides

[andreyoganesyan]

Check that this is really a bug

• I confirm

Reproduction link

—

Bug description

I'm using a setup with nested web components as slides, here's a simplified example:

<custom-swiper>
    <custom-element-1 class="swiper-slide">
        <custom-element-2>Slide 1</custom-element-2>
    </custom-element-1>
    <custom-element-1 class="swiper-slide">
        <custom-element-2>Slide 2</custom-element-2>
    </custom-element-1>
    <custom-element-1 class="swiper-slide">
        <custom-element-2>Slide 3</custom-element-2>
    </custom-element-1>
</custom-swiper>

And the custom-swiper component looks something like this:

<div class="swiper">
    <slot class="swiper-wrapper"></slot>
</div>

And whenever I try swiping on the content of custom-element-2, these swipes are ignored and no touchStart/touchMove/touchEnd events are triggered on swiper side.

I've investigated this issue, and found that the root cause is in this check in event handlers:

  if (params.touchEventsTarget === 'wrapper') {
    if (!elementIsChildOf(targetEl, swiper.wrapperEl)) return;
  }

In this case the event target is the nested custom-element-2, and the current implementation of elementIsChildOf returns false when checking if it's a child of the wrapper. So, the event is ignored and no swiping happens.

P.S.: Unfortunately, setting all of this up in codesandbox would take a significant amount of time, so hopefully my examples are clear enough.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

11.1.14

Platform/Target and Browser Versions

All modern browsers

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR