I am trying to use super tabs in custom components but the contents are not visible

Question

I want to use super tabs inside the custom component but the contents of tabs are not visible.

Here is the code: super-tabs.component.html:

<ion-header class="ion-no-border">
  <ion-toolbar color="primary">
     <ion-title>Super Tabs</ion-title>
  </ion-toolbar>
</ion-header>
<super-tabs>
  <super-tabs-toolbar slot="top" color="primary">
    <super-tab-button>
      <ion-icon name="home" color="light"></ion-icon>
      <ion-label>Home</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-icon name="star" color="light"></ion-icon>
      <ion-label>Activity</ion-label>
    </super-tab-button>
    <super-tab-button>
      <ion-icon name="person" color="light"></ion-icon>
      <ion-label>Person</ion-label>
    </super-tab-button>
  </super-tabs-toolbar>
  <super-tabs-container>
    <super-tab>
      <ion-content>
        tab1
      </ion-content>
   </super-tab>
   <super-tab>
     <ion-content>
       tab2f
     </ion-content>
   </super-tab>
   <super-tab>
     <ion-content>
       tab3
     </ion-content>
   </super-tab>
 </super-tabs-container>
</super-tabs>

The contents tab1, tab2 and tab3 are not visible.