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,

  setTimeout(async () => {
    const toastCtrl = document.querySelector('ion-toast-controller');
    const toast = await toastCtrl.create(toastOptions);
  }, 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();

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

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


  export let actions;

  function handleAction(action) {
    if (action.handler) {

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?