Ion-tab-button custom component for reuse

Ionic Framework Ionic Angular
1

Hi,
I am making a reusable component, based on ion-tab-button and I have created a new angular component with @Component.
All works well except for the styling when this is placed inside an ion-tab-bar. The reason for this is that my new components tags are placed “in-between” ion-tab-bar and ion-tab-button. The resulting HTML looks something like:

ion-tab-bar
  ion-tab-button
  my-tab-button
    ion-tab-button

instead of the normal

ion-tab-bar
  ion-tab-button
  ion-tab-button

And it brakes the layout styling.

Screenshot 2020-04-29 at 09.29.19
Screenshot 2020-04-29 at 09.29.19770×1350 23.1 KB

I have tried to add styling to my component but it has not worked so far…
Any ideas or suggestions about how to get around this, if at all possible?
A small test project illustrating the issue is available here

2

Sorted this by inspecting the css properties on the ion-tab-button component and re-applying them to my new component. Also making sure that the contained button fills 100% of the new component.

:host {
    max-width: 168px;
    height: 100%;
    flex: 1 1 0;

    ion-tab-button {
        width: 100%;
    }
}

There is still one issue and with the max-width; it isn’t the same on all devices + platform combination as far as I can tell e.g. the tab button is a bit larger on an iPad.
One could try to apply some media query to try to sort that out

@media (min-width: 1200px) {
        max-width: 240px;
    }