Support using slots as swiper wrappers for web components

[andreyoganesyan]

Clear and concise description of the problem

As a developer using Swiper and developing web components, I want to be able to make swiper-wrapper a slot, so that the slides can be dynamically added to the wrapper when web components are used.

Suggested solution

The current implementation uses wrapper's children property to detect slides, but slot's content is not included in its children, there is a separate assignedElements() method to access it.

So, I suggest making the following changes to the elementChildren() util function:

function elementChildren(element, selector = '') {
  const children = [...element.children];
  if(element instanceof HTMLSlotElement) {
    children.push(...element.assignedElements())
  }

  if(!selector) {
    return children;
  }
  return children.filter((el) => el.matches(selector));
}

I also suggest adding the following utility function to be used wherever wrapperEl.contains() was used:

function elementIsChildOf(el, parent) {
  const children = elementChildren(parent);
  return children.includes(el);
}

To avoid duplication, I reused the elementChildren() function in elemtIsChildOf(), that's why I added a check for empty selector, since el.matches('') throws a DOMException.

Alternative

No response

Additional context

I have tested this solution in a component library I'm working on, and changing these two functions does indeed enable support for using slots as wrappers. Here is a barebones example of what it looks like in a custom-carousel component:

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

Then, when using the custom-carousel element:

<custom-carousel>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
</custom-carousel>

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.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[defmech]

@andreyoganesyan Do you have a more complete code sample for this? I'm using version 11.1.8 and can't get <slot class="swiper-wrapper"></slot> to work as intended.