Styling inside Shadow DOM


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
        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…

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?