Best practice Ionic component + javascript custom component


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

For example with ION-MODAL:

_the “Usage” section specify that:

customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
    <ion-title>Super Modal</ion-title>

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:

    <my-custom-modal id="my-custom-modal"
 presentModal() {
  const modalController = document.querySelector('ion-modal-controller');
  const myCustomModal= document.getElementById('my-custom-modal');
  .then(() => {
    component: myCustomModal })
    .then((modalElement) => {

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 ?