设置滑动器 Web 组件导航按钮的样式

Question

所以我对 Web 组件和 Shadow dom 相当陌生。

我正在尝试创建包含 swiper Web 组件的 Web 组件，到目前为止一切正常；虽然我正在尝试制作自定义导航按钮。

<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>

这在直接添加到 HTML 中时有效。

尽管当我在 JS 中导出它时，我并没有取得很大的成功。不知道是不是在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>`
  )
}

我尝试传递 Shadowroot 并选择元素。然后我尝试了另一种方法将其添加到参数中

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

（甚至尝试使用 Shadowroot 作为参数中的选择器）

Answer 1

我通过在 css 中使用此代码解决了同样的问题：

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