bug: SplitPane not working when Menu is wrapped in a Component

[nickwinger]

Bug Report

When wrappen the menu inside a SpliePane in it's own component (e.g. <my-menu>) the SplitPane is not working as expected (2 Panes are shown)

Ionic version:

[x] 5.x
latest

Current behavior:

When wrapping the menu inside a SplitPane in it's own component (e.g. )
2 Panes are shwon

Expected behavior:

The SplitPane should work as if i would put the <ion-menu> right underneath the SplitPane

Steps to reproduce:

Related code:
not working:

<ion-split-pane when="xl" contentId="main">
  <my-menu></my-menu>

  <ion-router-outlet main id="main"></ion-router-outlet>
</ion-split-pane>

working:

<ion-split-pane when="xl" contentId="main">
  <ion-menu>...</ion-menu>

  <ion-router-outlet main id="main"></ion-router-outlet>
</ion-split-pane>

insert short code snippets here

Other information:

Ionic info:

insert the output from ionic info here

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

[nickwinger]

Here is the repo where you can reproduce the issue:
https://github.com/nickwinger/ionicMenuBug

The menu should be permanent open on desktop but it isn't

[liamdebeasi]

Thanks for the follow up. I need to dig into this more, but at first glance it does not look like this is possible. The ion-menu in your app is missing these styles: https://github.com/ionic-team/ionic/blob/master/core/src/components/split-pane/split-pane.scss#L56-L61.

The problem is that the ::slotted pseudo-element only works on slotted top-level nodes. Since the top level node is your wrapped-menu component, the styles will not get applied.

[nickwinger]

hmm, i copied the css-classes applied to the ion-menu when it is not wrapped to the wrapped ion-menu but it still not showing.
I guess there must be more into showing the menu but only css-classes (styles) ?
is it really only css classes handling the menu show/hide state ?