Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): add support to loop with slotted elements #5117

Merged
merged 1 commit into from Oct 25, 2021

Conversation

davidigza
Copy link
Contributor

@davidigza davidigza commented Oct 20, 2021

Hello, when we are working with web components and elements that are being introduced via Slot I have detected that the creation of the loop is not working correctly, since it assumes that the children slides are directly mounted on the wrapper node, but in this case the nodes slides are children of the container.

With this change I pretend that the node that I find is the parent node always starting from one of the slides children nodes.

Example:

 <my-custom-element>
  <div class="swiper-slide"><p>lorem ipsum</p></div>
  <div class="swiper-slide"><p>lorem ipsum</p></div>
 <div class="swiper-slide"><p>lorem ipsum</p></div>
 </my-custom-element>

Inside my webComponent I have the following structure:

 <my-custom-element>
   shadow-root
       <div class="container">
          <div class="swipper-wrapper">
                <slot></slot>
          </div>
      </div>
</my-custom-element>

my nodes with the swiper-slide class are in my ligthDom when the loop is created it assumes that it has to put the duplicate nodes inside the wrapper, thus eliminating the slot and causing the swiper to stop working.

functional codePen Example all in shadowDom https://codepen.io/davidigza/pen/XWajKmv
CodePen with slotted content and loop this break the node order https://codepen.io/davidigza/pen/rNzMWVv

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants