How to change style property of ion-conten in shadow-root

ionic-v1
1

Screenshot%20from%202019-04-01%2010-14-12

I having hard time trying to rewriting the position property in the .inner-scroll class from

position: absolute;

to

position: inherit !important;

from the console I can get it with

document.querySelector('ion-content').shadowRoot.querySelector('.inner-scroll')

from angular I getting null for all cases:

  ngAfterViewInit () {
   setTimeout(() => {
      console.log(this.el.nativeElement.querySelector('ion-content').shadowRoot.querySelector('.inner-scroll'));
      console.log(this.el.nativeElement.querySelector('ion-content').shadowRoot.querySelector('.inner-scroll.scroll-y'));
      console.log(this.el.nativeElement.querySelector('ion-content').shadowRoot.querySelector('div'));
      console.log(document.querySelector('ion-content').shadowRoot.querySelector('.inner-scroll'));
    });
  }

I need change this in order to implement an animation lib, https://github.com/michalsnik/aos

Theses web component inject styles that are hard to change and make the lib don’t work properly.


.ion-page {
  contain: inherit !important;
  overflow: inherit !important;
}

app-default-layout {
  contain: inherit !important;
  overflow: inherit !important;
}
2

I make it work with, but I don’t like, It look like very bad solution.

  ngAfterViewInit () {
   setTimeout(() => {

    this.el.nativeElement
      .querySelector('ion-content')
      .shadowRoot
      .querySelector('.inner-scroll')
      .setAttribute('style', 'position: inherit !important;');

    }, 500);
  }
3

Not, setting that property make the scroll stop working.