Swiper init incorrectly determining RTL when inside ion-content

[Farbdose]

Check that this is really a bug

• I confirm

Reproduction link

https://stackblitz.com/edit/angular-ywh4p1-vza2cj?file=src%2Fapp%2Fapp.component.html

Bug description

When placing a swiperjs.com swiper inside an ion-content (and rendering it with a delay) the swiper doesn't recognize the surrounding dir="rtl". Only happens with ion-content.

I'm not sure if this is a swiperjs problem or an ionic problem but ionic asked me to create an issue here too: ionic-team/ionic-framework#29368 (comment)

Expected Behavior

rtl should propagate through ion-content regardless of when the component is rendered.

Actual Behavior

1. create a div with dir="rtl"
2. put a swiper inside an ion-content inside the div and render it a few ticks later using ngIf
3. try swiping
4. swiper doesn't swipe

See linked stackblitz, first swiper works on clean page load but breaks after stackblitz livereload, second swiper doesn't work at all, 3rd and 4th work.

Swiper version

11

Platform/Target and Browser Versions

macOS Chrom 124

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

[Farbdose]

Based on what I've seen so far it looks like the swiper init runs before the swiper element itself is fully integrated in the dom making it not recognize the surrounding style rules as it's still floating somewhere in the deep dark shadow dom.

Get Computed Style reports ltr while theoretically inside the div with RTL and only switches to RTL a few ticks later.

I observed this a few days ago and couldn't find the actual init code, which lead to me creating a feature request #7479 which got promptly shut down without asking why I may have asked for something that should be already present - my enthusiasmus to create a pr for this has somewhat diminished since then.

[liamdebeasi]

Wanted to cross post my findings regarding this issue: ionic-team/ionic-framework#29368 (comment)

This was originally reported as an Ionic Framework issue, but the root cause appears to be related to how inheritance works with slotted content.

[nolimits4web]

t0ggles-create swiper

[t0ggles]

Task nolimits4web/SWIPER-94 was created

[nolimits4web]

I am not sure what else we can do here on Swiper side. It is already initialized only within a connected callback. And here is the example of when it is placed inside of the multiple custom elements components https://codepen.io/nolimits4web/pen/eYwvObb. Everything works as expected

[t0ggles]

The issue was unlinked from the task nolimits4web/SWIPER-94