bug: Creating a modal component without resorting to customElements

[raymondboswel]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I'm currently using Ionic in a Svelte project. According to the docs, when using Ionic without one of the standard framework bindings, you ustom element. This is proving to be problematic, since my global styles / tailwind classes are not applied in the custom element.

Expected Behavior

Having used @ionic/angular in quite a few projects it definitely didn't feel like the modal components were being converted to customElements behind the scenes, so I assume there's another mechanism that can be used in addition to creating custom elements?

Steps to Reproduce

Create blank project with Svelte or just vanillaJS and use modalController in application

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you try slotting your content in directly inside of ion-modal?

<ion-modal is-open="true">
  <!-- put your content here -->
</ion-modal>

This should let you pass in content directly without having to use a custom element.

For Ionic Angular projects, we have a utility that interfaces with Angular so you can use Angular components. Since we do not have a Svelte integration, this utility does not exist for Svelte projects.

[raymondboswel]

Hi @liamdebeasi, thank you for the suggestion. I have tried it, but there seems to be some layout issues (the content at the bottom of the modal extends below the screen, also leave animation of modal is a bit weird). I have in the mean time come across a solution which I have had to slightly adapt, but seems to work well, so I'll leave that here as an alternative:

//Unused component variable to force component import at function call
export const IonicShowModal = async (
  selector: string,
  component: new (...args: any) => SvelteComponent,
  componentProps: any
) => {
  
  const modal = await modalController.create({
    component: selector,
    componentProps,
  });
  await modal.present();

  //TODO: Consider what should happen if more than 1 tag found...
  let elem = document.getElementsByTagName(selector)[0];  
  
  let svelteComponent = new component({ target: elem, props: componentProps, });

  let res = await modal.onWillDismiss();

  svelteComponent.$destroy();
  elem.remove();

  return res;
  
};

[liamdebeasi]

Can you reproduce the layout issues in a sample app?

[raymondboswel]

I'm sure I could. I'll create a reproduction in the AM 👍

[liamdebeasi]

Thank you!

[raymondboswel]

I created a reproduction repo here: https://github.com/raymondboswel/ionic-modal-reproduction. There's a note and usage instructions in the README. Thanks 🍻

[liamdebeasi]

The sizing issue seems to be related to the margins you have applied to article. Wrapping the article in a <div class="ion-page"> seems to do the trick.

With the framework bindings we do this for you. Can you try that and let me know if it resolves the issue?

[raymondboswel]

Hi @liamdebeasi, that works! We can close this one out. Thanks a million 👍

[averyjohnston]

Glad to hear this is resolved! I'll close this. Thanks for using Ionic!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.