IonSlides => Swiper.js transitions to Shadow DOM

Ionic Framework
1

Hey!

In the move from Ion Slides to Swiper.js, elements such as pagination are now in the Shadow DOM, and thus inaccessible for styling in CSS. The example below worked with Ion Slides, but not in Swiper.js.


swiper-container {
  .swiper-pagination-bullet {
    transition: background-color 0.5s, width 0.5s;
    border-radius: 8px;
    opacity: 0.5;
    &.swiper-pagination-bullet-active {
      opacity: 1;
      width: 3em;
    }
  }

Is there a way around this? Does Swiper.js expose the Shadow DOM through ::part() e.g.?

2

Swiper does provide some custom CSS properties - Swiper API.

3

Yep, but it’s pretty limited, unfortunately.

4

I am targeting the class directly. The welcome-slides class is on the Swiper component (I am using Vue).

<style>
.welcome-slides .swiper-pagination-bullet {
    height: 9px;
    width: 9px;
    border-width: 1px;
    border-color: theme('colors.primary.default');
    opacity: 1;
}
</style>
5

Maybe it’s different in Vue? I’m unable to target .swiper-pagination-bullet in any way, as it’s in the Shadow DOM.

Skjermbilde 2023-04-06 kl. 19.35.09
Skjermbilde 2023-04-06 kl. 19.35.091240×368 140 KB

In browser inspect stylesheet:
Skjermbilde 2023-04-06 kl. 19.35.20

6

You’re right, it is different in Vue. Vue is just using a div instead of swiper-container (they are now recommending Vue users switch to the native Web Components). However, my slides are in the shadow DOM of IonContent which is in the shadow DOM of IonRouterOutlet and I can still target .swiper-pagination-bullet with global styles.