Best practice Ionic component + javascript custom component

Ionic Framework
1

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

For example with ION-MODAL:

_the “Usage” section specify that:

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

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:

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

 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 ?