Using Element combined with vue to inject invalid values into the injectStyles attribute

[xhc-code]

Check that this is really a bug

• I confirm

Reproduction link

no

Bug description

I used the swiper-container to customize the web component through the Element method, and found that the injectStyles property was aligned and injected through the Vue method. This is a problem that the dom is bound to a string, and the style value of the array is passed.

For testing purposes, I set the array value directly to the injectStyles property, and the strings spliced ​​by commas are bound on the dom.

I'm pretty sure this is a problem with swiper's handling of this attribute when defining the Element component. Through the official demo, there is no problem with the cdn import method used, but the swiper installed through npm has this problem.

// In this example, view the properties bound by dom through the browser, and the result is
// el.injectStyles="1,2,3,4,5"
<swiper-container :inject-styles="[1,2,3,4,5]">
 …
</swiper-container>

At present, only the attribute injectStyles has been found to be problematic, and others have not been found yet.

The official website explains how to use it: https://swiperjs.com/element#usage-with-vue

Expected Behavior

normal injection style

Actual Behavior

cannot inject styles

Swiper version

9.2.0

Platform/Target and Browser Versions

Windows

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

[xhc-code]

The speed is so fast, that is to say, the current level of support for Element's web components is not enough?

[nolimits4web]

Sorry, what?

[xhc-code]

Sorry, what?

It's okay, it's great