# Ionic CDN Import Test

**URL:** <https://forum.ionicframework.com/t/ionic-cdn-import-test/235656>\
**Category:** Ionic Framework\
**Created:** [August 19, 2023, 5:02am UTC](https://forum.ionicframework.com/t/ionic-cdn-import-test/235656 "2023-08-19T05:02:12Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexdroidcuba](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@alexdroidcuba](https://forum.ionicframework.com/u/alexdroidcuba)\
**Post date:** [August 19, 2023, 5:02am UTC](https://forum.ionicframework.com/t/ionic-cdn-import-test/235656/1 "2023-08-19T05:02:13Z")

</div>

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](https://codepen.io/alexdroidcuba/pen/XWoWYoW)

```auto
<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>

```

```auto
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)

```