How to access the nested shadow-dom Ionic angular using native element

Question

I want to access the child shadow-root inside a parent shadow-root.

const shadow = this.el.nativeElement.attachShadow({ mode: 'open' })

The above code actually return the parent shadow-root, but i tried to access the child showdow-root using querySelector but it return null.

The main purpose is to change the position-top value to 44px in the ion-backdrop component which is a shadowdom inside ion-menu component. Please find below the screenshot.

Answer 1

I think you can't edit that property because on the official documentation for ion-backdrop there is no custom css that allows you to overwrite the standard values in the shadow dom. It is the clear intention that these values can't be overwritten that easy.

But the documentation also says: Backdrops are full screen components that overlay other components. So you might reach your goal if you nest your Backdrop in another component that fits your needs? Hope that helps.