使用Swiper Element的injectStyles如何设置<swiper-slide>样式？

问题背景 #

我在Angular项目中使用Swiper Element（WebComponent），尝试通过injectStyles配置轮播样式：

export const PROJECT_SWIPER_OPTIONS: SwiperOptions = {
  direction: 'horizontal',
  loop: false,
  grabCursor: true,
  navigation: true,
  injectStyles: [`
    :host {
      height: 100%;
    }

    :host .swiper-wrapper {
      border: 1px solid red;
    }

    :host .swiper-slide {
      border: 1px solid green;
    }
  `],
};

其中:host和:host .swiper-wrapper的样式正常生效，但:host .swiper-slide的样式被忽略。尝试过:host .slide、:host swiper-slide等选择器也无效，推测是<swiper-slide>元素通过插槽插入到Shadow DOM中导致的。目前用Angular的::ng-deep实现了效果，但样式分散在Swiper配置和组件SCSS中，希望能统一通过injectStyles配置。

解决方法 #

方法一：用::slotted()选择器直接匹配插槽内的swiper-slide #

::slotted()是Shadow DOM的伪元素选择器，专门用于选中通过插槽插入到组件内的元素。直接在injectStyles里使用该选择器即可：

export const PROJECT_SWIPER_OPTIONS: SwiperOptions = {
  direction: 'horizontal',
  loop: false,
  grabCursor: true,
  navigation: true,
  injectStyles: [`
    :host {
      height: 100%;
    }

    :host .swiper-wrapper {
      border: 1px solid red;
    }

    // 用::slotted()选中插槽内的swiper-slide元素
    :host ::slotted(swiper-slide) {
      border: 1px solid green;
    }
  `],
};

方法二：自定义slide类名+::slotted()（更灵活） #

如果需要更精准的样式控制，可以给swiper-slide设置自定义类名，再通过::slotted()匹配：

1. 配置Swiper时指定自定义slide类名：

export const PROJECT_SWIPER_OPTIONS: SwiperOptions = {
  direction: 'horizontal',
  loop: false,
  grabCursor: true,
  navigation: true,
  slideClass: 'custom-slide', // 自定义slide类名
  injectStyles: [`
    :host {
      height: 100%;
    }

    :host .swiper-wrapper {
      border: 1px solid red;
    }

    // 匹配带自定义类的swiper-slide
    :host ::slotted(.custom-slide) {
      border: 1px solid green;
    }
  `],
};

2. 在模板中给swiper-slide添加该类：

<swiper-slide class="custom-slide">
  <!-- 幻灯片内容 -->
</swiper-slide>

原理说明 #

因为<swiper-slide>是通过组件插槽（slot）插入到Swiper的Shadow DOM内部的，普通的后代选择器无法穿透Shadow DOM的插槽边界。::slotted()伪元素专门用于处理这种场景，允许从Shadow DOM内部选中插槽传入的元素，这样就能把所有样式统一写在injectStyles里，不用分散到组件的SCSS文件中。

内容的提问来源于stack exchange，提问作者lampshade