Unable to create popovers in Svelte

I am using Ionic in a Svelte project using the cdn. All is working fine, except for popovers. I use a HTML tag for the ion-loader-controller, ion-modal-controller, ion-popover-controller and ion-toast-controller. For example, to create a new toast, I do this:

export async function onError(message, options) {
  const toastOptions = {
    duration: null,
    color: 'danger',
    position: 'bottom',
    showCloseButton: true,
    delay: 0,
    message,
    ...options
  };

  setTimeout(async () => {
    const toastCtrl = document.querySelector('ion-toast-controller');
    const toast = await toastCtrl.create(toastOptions);
    toast.present();
  }, toastOptions.delay);
}

But when I try this same trick with a popover or modal, it says: “Error: framework delegate is missing”:

import ActionsPopover from '../components/ActionsPopover.svelte';

async function openContextMenu(event) {
    const popoverCtrl = document.querySelector('ion-modal-controller');
    const popover = await popoverCtrl.create({
      component: ActionsPopover,
      componentProps: {
        actions: [
          {
              label: 'OK',
              handler: handleOk()
          }
        ]
      }
    });
    await popover.present();
    const {data} = await popover.onDidDismiss();
    console.log(data);
  }

ActionsPopover.svelte is a svelte component, which gets compiled to HTMLElement by Svelte:

<ion-list>
  {#each actions as action}
    <ion-item on:click={handleAction(action)}>
      <ion-label>{action.label}</ion-label>
    </ion-item>
  {/each}

</ion-list>

<script>
  export let actions;

  function handleAction(action) {
    if (action.handler) {
      action.handler();
    }
  }
</script>

Can I not reference Svelte components directly in the popover controller? How can I use Svelte components with the popover or modal controllers? Or should I manually create custom elements?