I recently had the opportunity to work with Lightning Web Components (LWCs) for the first time, and it was surprisingly easy to pick up … until I got to a component that needed to contain a very customized carousel. Ideally we’d use our slider of choice for this, Swiper, but LWCs render in the shadow DOM, making things a little tricky. We couldn’t just call Swiper on a DOM element in our JavaScript file as we typically would.
Fortunately, there was an easy answer: You can force an LWC to render in the “light” DOM.
To do so, the component’s HTML file should look something like what is on the right here:
.png)
.png)
And to left, the component’s JavaScript file should look something like this:
Something to note is how Swiper is initialized a little differently in LWCs. You’ll need to create a function that is then called in the renderedCallback() function. You also won’t be able to add things like previous/next buttons and pagination as options when you call Swiper; instead, they need to be implemented in your JavaScript, as in the file above.
Another thing to note is while most CSS is scoped to its specific component in LWCs, once you enter the light DOM the styles become global. You’ll want to be very specific with your class names, especially if you have different carousels in your design.
It takes a few extra steps, but ultimately it’s pretty easy to use third-party tools like Swiper in your LWCs.
