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

Question

I've a carousel based on the Swiperjs third-party library. The problem is that when I use scope: true, I have no problem and it works fine, however, when I try to configure the component with shadow: true, it is destroyed and nothing works. I am using the library as follows:
...
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>
);
}
}
For some reason, when I configure the component as "shadow: true", it cannot access stencil or is what I think.

Answer 1

When you enable shadow, all child elements of the component will be moved into its shadow DOM and therefore be hidden as implementation detail. That means that you won't be able to find your container with the .swiper-container query selector anymore.
However, the Swiper constructor can also take an HTML element instead of a query selector, so you can use ref on the container element instead:
#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>
);
}
}
The container ref should always already be available in the componentDidLoad life-cycle hook, but you can also use requestAnimationFrame to wait for it to become available.