feat: Ion-Header Styling During Astro View Transitions

[jesseagleboy]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

ion-header should reimplement the style tags appended to the header when transitioning between pages in Astro when using View Transitions. Style tags are removed during the transition and I haven't seen a function or a process to reapply the specialized ion-header styles afterward for a proper heading to fit.

Describe the Use Case

The use case would be used for utilizing Astro + View Transitions supported by Capacitor's web app build and device styling done by Ionic. View Transitions are pushed to give the website an app-like feel and look and the Ionic components help add to that with the proper md or ios styling. The ion-header is a huge piece of the native layout. When the header doesn't have all the styling implemented, the native layout breaks on mobile devices as tested on the iPhone.

The goal is to have a web app with a great tech stack. Astro has the ease to produce a website, Capacitor makes it easy to compile down to web apps and Ionic gives the developer a single UI base to make the app have the natural look of the current device.

Describe Preferred Solution

The preferred solution would be to have a function that can be manually called with Astro's View Transitions directives. This function would re-apply the style tags for the ion-header in the head element. The function, defineCustomElement, in the ion-header folder applies some styling to the header but it seems there is some Javascript at play to apply additional style nodes in the head that does not seem to be public for the developer.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response