# Best practice Ionic component + javascript custom component

**URL:** <https://forum.ionicframework.com/t/best-practice-ionic-component-javascript-custom-component/160201>\
**Category:** Ionic Framework\
**Created:** [March 28, 2019, 10:12am UTC](https://forum.ionicframework.com/t/best-practice-ionic-component-javascript-custom-component/160201 "2019-03-28T10:12:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nephren](https://avatars.discourse-cdn.com/v4/letter/n/c89c15/32.png) [@Nephren](https://forum.ionicframework.com/u/Nephren)\
**Post date:** [March 28, 2019, 10:12am UTC](https://forum.ionicframework.com/t/best-practice-ionic-component-javascript-custom-component/160201/1 "2019-03-28T10:12:19Z")

</div>

I have a question about best practice about ionic component and custom component.

For example with ION-MODAL:

\_the “Usage” section specify that:

```auto
<body>
  <ion-modal-controller></ion-modal-controller>
</body>

```

```auto
customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
<ion-header>
  <ion-toolbar>
    <ion-title>Super Modal</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  Content
</ion-content>`;
  }
});

async function presentModal() {
  // initialize controller
  const modalController = document.querySelector('ion-modal-controller');
  await modalController.componentOnReady();

  // present the modal
  const modalElement = await modalController.create({
    component: 'modal-page'
  });
  await modalElement.present();
}

```

it’s cool for a modal with few complexity, but in my case I decided to create a separate and custom component with its own tag.  
I get it by its ID and affect the “component” attribute in the create function with my custom element.  
it look like that:

```auto
<body>
  <ion-modal-controller>
    <my-custom-modal id="my-custom-modal"
     :props1="toto"
     @close-modal="closeModal">
    </my-custom-modal>
  </ion-modal-controller>
</body>

```

```auto
 presentModal() {
  const modalController = document.querySelector('ion-modal-controller');
  const myCustomModal= document.getElementById('my-custom-modal');
  modalController.componentOnReady()
  .then(() => {
  modalController.create({
    component: myCustomModal })
    .then((modalElement) => {
      modalElement.present();
    });
  });
}

```

My question is there.  
I don’t know where i must put my custom component tag…  
In the ion-modal-controller tag, like that my custom tag can be displayed only when I trigger the ion-modal-controller or outside the ion-modal-controller tag ?