Stenciljs：当我更改范围时 Carousel 第三方库被破坏：'true' 用于阴影：'true'

Question

我有一个基于 Swiperjs 第三方库的轮播。问题是，当我使用 scope: true 时，我没有问题并且工作正常，但是，当我尝试使用 shadow: true 配置组件时，它被破坏并且没有任何效果。我使用的库如下：

...
import  Swiper, { SwiperOptions }  from 'swiper';
...

@Component({
  tag: 'my-swiper-slider',
  styleUrl: './styles.css',
  assetsDirs: ['assets'],
  shadow: true,
})
export class Carousel {
@Prop() options: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 40,
    autoplay: false,
    loop: false,
    autoHeight: true,
    breakpoints: {
      640: {
        slidesPerView: 5,
        spaceBetween: 20,
      },
      768: {
        slidesPerView: 5,
        spaceBetween: 40,
      },
      1024: {
        slidesPerView: 5,
        spaceBetween: 50,
      },
    }
  }
 private setSwiper() {
    this.swiper = new Swiper('.swiper-container', this.options);
  }

  componentDidLoad() {
    this.setSwiper();
  }

  render() {

    return (
      <Host class={{"container": true}}>

        <PrevBtn
          goBack={this.goBack.bind(this)} />

        <div class="swiper-container">
          <div class="swiper-wrapper">
            <slot></slot>
          </div>
        </div>

        <NextBtn
          goForward={this.goForward.bind(this)} />

      </Host>
    );
  }
}

出于某种原因，当我将组件配置为 "shadow: true" 时，它无法访问 stencil 或者是我的想法。

Answer 1

当您启用 shadow 时，组件的所有子元素都将移动到它的影子 DOM 中，因此作为实现细节被隐藏。这意味着您将无法再使用 .swiper-container 查询选择器找到您的容器。

但是，Swiper 构造函数也可以采用 HTML 元素而不是查询选择器，因此您可以在容器元素上使用 ref：

@Component({ tag: 'my-swiper-slider', shadow: true })
export class Carousel {
  @Prop() options: SwiperOptions;

  @State() swiper?: Swiper;
  @State() swiperContainerRef?: HTMLDivElement;

  componentDidLoad() {
    if (this.swiperContainerRef) {
      this.swiper = new Swiper(this.swiperContainerRef, this.options);
    }
  }

  render() {
    return (
      <Host>
        <div ref={el => this.swiperContainerRef = el)} />
      </Host>
    );
  }
}

容器引用在 componentDidLoad 生命周期挂钩中应该始终可用，但您也可以使用 requestAnimationFrame 等待它可用。

Stenciljs：当我更改范围时 Carousel 第三方库被破坏：'true' 用于阴影：'true'

Stenciljs: Carousel third-party library destroyed when I change scope: 'true' for shadow: 'true'

stenciljs

swiperjs