I’ve integrated Capacitor with Astro which overall works well. When I want to get more of a native look, I saw that the parent developer, Ionic, has Web Components that alter to the current device’s look (ios or md – Material Design). However, using Astro’s View Transitions, there seems to be some odd inconsistency with the styling. Most notably with the ion-header, the header will disappear between the transition as Astro does not rerun scripts explicitly. However, other functionality and styling for components such as ion-button are the same. I am trying to figure out how to manually initialize the Ionic script to retain the native styling of the page (either as 'ios' or 'md'). Using the Astro data-astro-rerun does not work as the warning says that it can’t rerun external scripts. There are the event-handler directives such as astro:after-swap which is where I am trying to figure out how to call the overall Ionic script to re-apply classes to elements such as the html tag.
I use this CDN to load the script: https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"
Link to Ionic CDN instructions
The current HTML layout is like this:
<html lang='en'>
<Head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
<meta name='generator' content={Astro.generator} />
<title>{title}</title>
<meta name='title' content={title} />
<meta name='description' content={description} />
<script type='module' src='https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js' is:inline></script>
<script nomodule src='https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js' is:inline></script>
<ViewTransitions />
</Head>
<body>
<ion-app>
<NavBar title={title} />
<ion-content class='ion-padding'>
<slot />
</ion-content>
</ion-app>
</body>
</html>
Navbar is simply laid out like this:
<ion-header>
<ion-toolbar>
<ion-title>{title}</ion-title>
{
title !== "Homepage" && (
<ion-buttons slot='end'>
<ion-button href='/'>Back</ion-button>
</ion-buttons>
)
}
</ion-toolbar>
</ion-header>
Before load:
After Load:
