Adding style to Swiper Element v9 in ionic 6

Question

this is not me asking questions, but contributing my quota to some of the challenges some developers faced styling the latest Swiper Element in ionic 6 as a proper documentation is not yet in place

Assuming that the .swiper-slider-full element has a shadow root and the active bullet is a child element of it, the following code should work:

Using JQuery:

Follow these steps:

1. Install jquery using npm install jquery@latest --save and
2. import jquery (import * as $ from 'jquery';)

$(document).ready(function() {
  const myElement = $(".swiper-slider-full").get(0);
  const shadowRoot = (myElement as any).shadowRoot;
  const style = document.createElement('style');
  style.textContent = `
                :host {
                height: 200px
                }
                .swiper-pagination{
                margin-top: 20px !important;
                text-align: left;
                padding-left: 20px
                }
                .swiper-pagination-bullet-active {
                    width: 40px;
                    border-radius: 5px;
                    background: #660d3e;
                    transition: width .5s;
                    border: 1px solid transparent;
                }
                `;
  shadowRoot.appendChild(style);
});

Assuming that you want to apply the styles to an Ionic component with the class name .swiper-slider-full, you can convert the code to Ionic 6 as follows:

import { AfterViewInit, Component, ElementRef, NgZone, Renderer2, ViewChild } from '@angular/core';


export class IntroPage implements AfterViewInit {

  @ViewChild('swiperSliderFull', { read: ElementRef, static: true }) swiperSliderFull: ElementRef;

  constructor(
    private ngZone: NgZone,
    private renderer: Renderer2,
  ) { }

  ngAfterViewInit() {
    this.ngZone.runOutsideAngular(() => {
      const myElement = this.swiperSliderFull.nativeElement;
      const shadowRoot = (myElement as any).shadowRoot || myElement.attachShadow({ mode: 'open' });
      const style = this.renderer.createElement('style');
      style.textContent = `
        :host {
            height: 200px
            }
        .swiper-pagination{
          margin-top: 20px !important;
          text-align: left;
          padding-left: 20px
        }
        .swiper-pagination-bullet-active {
          width: 40px;
          border-radius: 5px;
          background: #660d3e;
          transition: width .5s;
          border: 1px solid transparent;
        }
      `;
      this.renderer.appendChild(shadowRoot, style);
    });
  }

}

This code creates a new style element and sets its textContent to a CSS rule that targets the active bullet element and sets its styles. The style element is then appended to the shadow root of the .swiper-slider-full element. This ensures that the styles only apply to the elements inside the shadow DOM and not to the rest of the page.