Core Version & Element Modules - unable to inject module style urls

awacode21 commented 5 months ago

Check that this is really a bug

[X] I confirm

Reproduction link

https://stackblitz.com/edit/swiper-element-module-styles?file=app.vue,components%2FBaseImageSlider.vue

Bug description

I am using Swiper element (web component) version as described here: https://swiperjs.com/element

I would like to use Core module + modules to only add the modules i really use. For performance reasons. So i tried to follow the instructions here: https://swiperjs.com/element

Regarding the docs these module style url injects should be possible:

injectStylesUrls: [
      'swiper/element/css/a11y',
      'swiper/element/css/keyboard',
      'swiper/element/css/navigation',
      'swiper/element/css/mousewheel',
    ],

But it does not work. No matter which export urls i try. it does not get applied.

Expected Behavior

Style url inject of the module styles should work

Actual Behavior

Not working. No styles applied

Swiper version

11.1.1

Platform/Target and Browser Versions

macOS Google Chrome Version 123.0.6312.107 (Offizieller Build) (arm64)

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[X] 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

nolimits4web commented 5 months ago

You need correct paths for styles

awacode21 commented 5 months ago

@nolimits4web i used the path you provide in the documentation for the element modules. And also when looking at your package.json exports i am using the correct paths.

So please instead of just closing the issue, please help! Because with the path provided by your documentation and your package.json exports it is not working.

So what exactly are the correct paths to your module styles?

arman-h commented 5 months ago

@nolimits4web first of all, thanks for creating the wonderful library.

In a project, we're trying to migrate from Swiper React to Elements, and I second @awacode21 comments, the documentation does not provide enough clarity on what to do. My code is almost exactly as documented here but this part of the documentation is a bit vague:

we also need to add modules styles globally and also inject modules styles to the shadow DOM

Does "add modules styles globally" mean import "swiper/element/css/pagination" in the context of a React app?
Does "inject modules styles to the shadow DOM" mean injectStylesUrls: ["swiper/element/css/pagination"]?
If not, how can we inject the existing styles provided by the package (i.e. stylesheets that already exist like node_modules/swiper/modules/pagination-element.min.css)?

Thanks for the response.

nolimits4web / swiper