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

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. <my-menu>) 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

[jbagaresgaray]

This bug is still happening as of 5.6.3 for @ionic/vue

<IonSplitPane content-id="main-content">
     <Sidebar />
     <ion-router-outlet id="main-content" ></ion-router-outlet>
</IonSplitPane>

so the temporary work around is

ion-menu {
  display: flex;
  flex-shrink: 0;
}

[cnanders]

This bug is still happening as of 5.4.3. If you get rid of the<ion-split-pane> it works as advertised with <ion-menu> wrapped in its own component, e.g., <my-side-menu>

<ion-app>
    <my-side-menu></my-side-menu>
    <ion-router-outlet></ion-router-outlet>
</ion-app>