bug: ion-menu compatibility with Angular ViewEncapsulation.ShadowDOM

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/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_