Styling swiper web component navigation buttons

Question

So I'm fairly new to web components and shadow doms.

I am trying to create web component that has the swiper web component within, everything works so far; although I am trying to make custom navigation buttons.

<swiper-container
      navigation-next-el=".next-button"
      navigation-prev-el=".prev-button"
>
...
</swiper-container>
<button class="next-button">Next</button>
<button class="prev-button">Prev</button>

This works when adding straight into the HTML.

Although when I export this in JS I don't have great success. I don't know if it's due to the selector when it's in the shadow dom.

import { register } from 'swiper/element/bundle';

export default function Carousel() {

  register()

  let carousel = () => {
    let markup = `
      <swiper-container class="carousel"
         navigation-next-el=".next-button"
         navigation-prev-el=".prev-button"
      >

        ...
      </swiper-container>

      <button class="next-button">prev</button>
      <button class="prev-button">next</button>
      
      <swiper-pagination></swiper-pagination>
      
    `

    return markup
  }

  return (
    `<div> ${carousel()} </div>`
  )
}

I tried passing down the shadowroot and selecting the element. Then I tried the other method to add it into the params

  navigation: {
    nextEl: '.next-button',
    prevEl: '.prev-button',
  },

(even tried using the shadowroot as a selector in the params)

Answer 1

I have the same issue I fixed by using this code in your css:

:root{
    --swiper-navigation-color: #THE COLOR CODE that you want;
}