Is it possible to inject AngularJS (1.7.2) directive to a modal in Ionic 4?

#1

This is the official documentation of creating a modal in Ionic 4 - for vanilla JS:

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();
}

presentModal();

This will pop the modal with the HTML that was “manually” written in the innerHTML.
However I want to render AngularJS directive, for example:

customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<my-custom-directive-functionality></my-custom-directive-functionality>`;
  }
});

However this doesn’t work and the modal appears blank.

Is it possible to do something like this:

// page.html
<modal-content></modal-content>

// page.js
const modalContent = document.querySelector('modal-content');

// and then create the modal with the next data:
const modalElement = await modalController.create({
    component: modalContent
  });