Ionic CDN Import Test

Greetings, I’m new using the Ionic Framework, I’m trying to do an individual import from Skypack CDN, and I have noticed that it does not add the hydrated class to the html tag or to the components, which causes them not to be displayed in the document unless to manually add the hydrated class to the html tag. Thanks in advance
Codepen Example

<link rel="stylesheet" href="https://cdn.skypack.dev/@ionic/core@7.3.0/css/ionic.bundle.css" />

<script>
  /*const html = document.querySelector("html")
  html.classList.add("hydrated")*/
  window.Ionic = {
    config: {
      rippleEffect: true,
      mode: 'md',
    },
  };
</script>

<ion-app>
  <ion-content>
    <ion-button>Default</ion-button>
    <ion-button color="primary">Primary</ion-button>
    <ion-button color="secondary">Secondary</ion-button>
    <ion-button color="tertiary">Tertiary</ion-button>
    <ion-button color="success">Success</ion-button>
    <ion-button color="warning">Warning</ion-button>
    <ion-button color="danger">Danger</ion-button>
    <ion-button color="light">Light</ion-button>
    <ion-button color="medium">Medium</ion-button>
    <ion-button color="dark">Dark</ion-button>
  </ion-content>
</ion-app>
import { IonApp } from 'https://cdn.skypack.dev/@ionic/core@7.3.0/components/ion-app.js'
import { IonContent } from 'https://cdn.skypack.dev/@ionic/core@7.3.0/components/ion-content.js'
import { IonButton } from 'https://cdn.skypack.dev/@ionic/core@7.3.0/components/ion-button.js'
import { IonRippleEffect } from 'https://cdn.skypack.dev/@ionic/core@7.3.0/components/ion-ripple-effect.js'
import { initialize } from 'https://cdn.skypack.dev/@ionic/core@7.3.0/components'

initialize()
window.customElements.define('ion-app', IonApp)
window.customElements.define('ion-content', IonContent)
window.customElements.define('ion-button', IonButton)
window.customElements.define('ion-ripple-effect', IonRippleEffect)