bug: ion-menu compatibility with Angular ViewEncapsulation.ShadowDOM

[onexip-vanessa]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

On Ionic Angular, the ViewEncapsulation.ShadowDOM will wrap a custom web component into its own ShadowRoot. This will break the ion-menu since we can only provide a contentId that the component uses to get the respective element via const content = this.contentId !== undefined ? document.getElementById(this.contentId) : null;

With the elements inside the ShadowRoot, they won't be found by getElementById(), it cannot get properly linked and we receive the error message:

Menu: must have a 'content' element to listen for drag events on.

Expected Behavior

Additionally to the contentId it would be great also to be able to provide a contentElement, so that in more specific cases of ViewEncapsulation the ion-menu can still be utilized.

Steps to Reproduce

1. Create a custom Angular web component
2. Set the component's encapsulation to encapsulation: ViewEncapsulation.ShadowDom
3. Add an ion-menu to the web-component and set the contentId to a respective ion-router-outlet or ion-content.

Code Reproduction URL

Ionic Info

Additional Information

No response