Question 237542 in CSS Question posted in
Some basic documentation can be found here.

Css – How to set styles for <swiper-slide> when using injectStyles in Swiper Element (WebComponent)?

I’m using Swiper Element (WebComponent) and I’m trying to adjust the styles of each slide. I’m using injectStyles for this purpose, which works fine for most parts:

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;
    }
  `],
};

The styles for :host and :host .swiper-wrapper are applied correctly. Unfortunately the styles for :host .swiper-slide are ignored. I also tried :host .slide, :host swiper-slide but it won’t work either.

It seems that the styles aren’t applied since the <swiper-slide> elements are slotted into the shadow element.

Any idea how to style the elements?

Currently I’m using this in my Angular project:

:host ::ng-deep {
  swiper-slide {
    border: 1px solid green;
  }
}

Which works, but I do have styles in the Swiper config and the componentn SCSS now. This doesnt seem right.

Tags:

2

Answers


  1. 0

    It looks like you’re encountering a scoping issue with CSS in Shadow DOM when trying to style the <swiper-slide> elements. Shadow DOM encapsulates the styles of its children, making it a bit more challenging to style them from the outside.

    Using ::part: You can use the ::part pseudo-element to style elements inside a Shadow DOM. This is a more recommended approach, as it’s designed to work with Shadow DOM encapsulation. To do this, you need to ensure that the elements you want to style have a part attribute set, and then you can style them using ::part. For example:

    :host::part(swiper-slide) {
  border: 1px solid green;
}

    Modify the Web Component: If possible, you could modify the Swiper Web Component to include a part attribute on its <swiper-slide> elements directly. This way, you can style them using ::part without any additional Angular-specific CSS.

    <swiper-slide part="swiper-slide">...</swiper-slide>
    Login or Signup to reply.
  2. 0

    How about manipulating styles or classes inline?

    In my case, I used the method below to manipulate the style of swiper in vue.

    const swiperWrapperDiv = document.getElementsByClassName('swiper-wrapper');
  if (swiperWrapperDiv) {
    console.log('swiperWrapperDiv');
    swiperWrapperDiv[0].classList.add('!h-[486px]');
  }

    I think in the question now

    but it is not recommended to manipulate the DOM directly.

    In Angular can use the Renderer2 service to safely manipulate the DOM.

    like below code

      constructor(private elRef : ElementRef, private renderer : Renderer2) {}

  ngAfterViewInit() {
    const swiperSlideElements = this.elRef.nativeElement.querySelectorAll('swiper-slide');

    swiperSlideElements.forEach(swiperSlide => {
      this.renderer.setStyle(swiperSlide, 'border', '1px solid green');
    });
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search