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

@romelgomez wrote:

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;
}

Posts: 2

Participants: 1

Read full topic