Styling inside Shadow DOM

Ionic Framework
1

Hello,

I wanted to see if anyone has come up with an elegant solution for styling inside the shadow dom of the ionic v4 web components… I recently ran into a case where I needed the range pin from the ion-range slider to always be visible. The solution I came up with was adding this into my class where I was using it:

  ngAfterViewInit () {
    //Make sure range pins always stays visible
    setTimeout(() => {
        const range_pins = this.el.nativeElement
            .querySelector('ion-range')
            .shadowRoot
            .querySelectorAll('.range-pin')
        range_pins.forEach(function(pin) {
            pin.setAttribute('style', 'transform: translate3d(0,-24px,0) scale(1);');
        });
     }, 500);
   }

This achieved the desired result but doesn’t feel like a very elegant solution…
53%20AM

Has anyone found better solutions for styling inside the shadow DOM of these components or the ability to inject css classes to override the styles inside these components?