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.