Ionic inside Stencil JS? or how to create "desktop" mode?


I have a query regarding a specific use case. We want to develop web apps that are to be used on three platforms: iOS, Android, and desktop browsers. For this, we plan to use components that look native on iOS, native on Android, and allow freely customizable styling on the web. These components should also be able to address as many native functionalities of the mobile devices as possible. These components should in turn be usable in various frameworks, whether it’s React, Angular or other Vanilla JS environments, and be able to function autonomously there.

Now the question is: What is the correct interaction between Ionic Framework, Stencil JS, and Capacitor here? Ionic alone does not offer the possibility for a custom design, a “desktop” mode in addition to “ios” and “md”. Therefore, there would need to be some sort of wrapper that decides via “isPlatform” whether to render the Ionic component or a custom component, for example with TailwindCSS. For the autonomy of these wrapped components, of course, a Web Component with Shadow DOM would be the right choice, hence the question of whether it makes sense to realize these with Stencil JS. But this seems somewhat absurd, since Ionic is built with Stencil JS itself. Also, there would then be the question of whether access to the native functions provided by Capacitor would still be available. Or how would the architecture have to be designed so that these Capacitor functionalities are usable?

What is the best approach here? We would like to use the versioned releases and not fork the current state of the Ionic Framework to scramble in the third “desktop” mode.

Any advice, opinion, hint would be very much appreciated :wink:

Maybe completely other approaches how to get a three designs web components library, that looks native to iOS and Android and is highly customizable for web?

By adding ionic(stencil) to stencil(again) it makes 0 sense. You’re making you project larger than it needs to be.

Ionic itself is made from stencil. IMO The point of stencil is to create your own design system and not piggyback off another.

Thanks for your reply! Yes, you’re confirming my thought, that this is somewhat absurd.

But the question still remains: How would one create components that have ionic for mobile devices and custom design for web? Has anybody else experiences regarding this?