[Element] Add part to pagination bullets and active pagination bullet

[strarsis]

Clear and concise description of the problem

For specific special styles to the swiper pagination bullets, each bullet needs to be an additional part.
Additionally, the active bullet needs to have a separate part name.

Suggested solution

Each bullet gets the part name pagination-bullet.
The active bullet gets the part name pagination-bullet--active.

Alternative

There are no real alternatives to adding those parts in core, except changing the swiper elements using JavaScript, which is neither robust nor having good performance.

Additional context

E.g. aspect-ratio; mask; transition and background properties have to be added sometimes (for using a SVG shape which color can be changed).

Component parts allow adding those styles cleanly and efficiently.

The selectors of a few swiper styles would need to be adjusted to work with a wrapper in between,
as direct descendant selectors are used.

Related: #6594

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.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[timeisgolden]

Hello, Team, I am trying to change the pagination bullet background color,
my code is the following.
swiper-container::part(pagination) { .swiper-pagination { background-color: red !important; .swiper-pagination-bullet { background-color: white !important; } .swiper-pagination-bullet-active { background: white !important; } } }
but nothing changed.

[strarsis]

@timeisgolden: Does that work for you? I tried this without explicit part on the bullet (and bullet state) and it does not appear to work from a parent parent. The bullet elements need to have a part attribute in order to be styles with the current browser CSS features.

[timeisgolden]

@strarsis
I have tried this code.
swiper-container::part(pagination) { background-color: red; .swiper-pagination-bullet { background-color: white !important; } .swiper-pagination-bullet-active { background: white !important; } }
the result is

As you can see the screenshot, the background of swiper-container::part(pagination) has been changed.
but the background of the pagination bullet and the active bullet is not changed.

[strarsis]

Correct, the bullet – and ideally the state (active or not) – has to be added as parts by Swiper Element itself, in order to allow styling the buttons, too.

[timeisgolden]

@strarsis but I can't change the style of the button(active bullet) with my above code.
Can you share a sample code to change the style of active bullet? especially, I want to change the background of active bullet.

[strarsis]

@timeisgolden: The swiper component either has to be modified with JavaScript or a modified fork used instead.

@nolimits4web: Adding those parts would be a tremendous help!