I recently took over an ionic application which had CSS that was a mess. The original developer had also attempted to reuse HTML as did yours. What turned out to be the problem is that the ionic CSS demands a very specific hierarchy.
Your attempting to achieve HTML reuse with a component butts heads with the design principles of Ionic when it comes to CSS.
An example of a CSS selector that is supposed to provide this padding is:
.ios ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
I say an example as there are no less than 40 different rules that include the target of toolbar.statusbar-padding:first-child to provide padding at the top. Our basic CSS file is over 1.7 MB large and I suspect it has to do a lot with the delay in loading the application. I have not figured out if this is the only reason for the massive size. An app with no CSS modifications is still about .5 MB.
It feels like someone was trying to create a design where you did not need to specify classes to identify what you were trying to accomplish to keep the HTML clean and instead introduced a very fragile CSS system that works against HTML code reuse, creates substantially larger CSS files and slower load times.
Using the rule I provided as an example (you can inspect the other 39 yourself in the main.css file that you will find in the www\build folder):
.ios ion-nav > .ion-page > ion-header > .toolbar.statusbar-padding:first-child,
The ion-navbar will have the classes toolbar and statusbar-padding added to it programmatically at runtime. For this CSS selector you can see that ion-navbar must be a direct descendant of ion-header and must be the first child within ion-header. However, ion-header must be a descendant of an element with the class .ion-page, which must in turn be the direct descendant of an ion-nav structure.
You can see from this that your attempt at code reuse does not work with ionic if you mix their component hierarchy with your own. The scary part is you don’t know what items you can wrap and not wrap without trial and error or reading through either their final CSS or their scss files. For example, cordova.ios.scss in the folder node_modules/ionic-angular/platform.
There may be a better solution to this, but at the current time, moving ion-navbar outside of your component and duplicating it in all of the places that use your component is the only solution I know. This solved the problem in my case. I just executed this myself and did not notice issues with the ion-title and ion-buttons being wrapped in reusable components within the ion-navbar entry. (Edit) I spoke too early. Wrapping Ionic elements in components worked great on IOS, but not on Android.
Hope this helps.