Hello Ionic Forum,
I am currently working on setting up a stencil component project which will be used to create components needed for our design system. As for now these components will be used inside an angular ionic app. For our components we planned to use ionic components inside our own components. For example creating a custom button which has an ion-button inside of it. This way we can already style the button in user specified ways and limit the customizability of the nested ion-button.
Setting up a stencil componen project was easy and is well described. Next step is to include ionic core. This is where my problems started. Officially documented here is only through and tags inside the head area of a html page. This works fine but makes no sense for building custom components (at least I believe it makes no sense). Therefore I added ionic core through npm as a dependency. After that I created a app.ts file under the global folder to load ionic:
Then I modified the stencil.config.ts to include this global script file:
Now looking at the component I am trying to build. My first goal was to forward the color attribute from my outer sav-button to the underlying ion-button. This is where things go wrong.
It kind of works and kind of doesn’t. The browser understands what an ion-button is and shows it initially correct. When setting the color attribute to secondary, I can see through the dev tools that the css class ion-color-secondary is added to the ion-button correctly but the result is a completely white button (looks invisible). The primary, secondary and tertiary colors are set correctly in the global css file and are defined. But the ionic css variables like ion-color-base do not seem to be set correctly, pointing at --ion-color-secondary-base for example. I am not sure if my importing of ionic core is incorrect or if something else is going wrong. Online I only found 2-3 year old examples of stencil projects that include ionic core.
Additionally, here is the global.css, the code of the tsx file of my button and the output in the browser:
Am I importing ionic core incorrect, do I use ion components wrong (is it not possible to include basically other stencil components in new stencil components) or is something else missing? To prevent additional questions on the same topic in the future I wonder if there are also other important steps required to export stencil components that include ionic components.