Ion-color-secondary/primary class not applied

Stencil
1

Hi :slight_smile:
I’ve created a stencil.js application (app starter) where I would like to use ionic components.

I included Ionic using the cdn following this tutorial (https://ionicframework.com/docs/installation/cdn).

I have a big problem with the style of some of the components like buttons, toggle etc…
The problem is that the primary/secondary/x style is not applied also if I use

color="primary"

I’ve searched a lot to solve this problem and I saw that the property .ion-color-primary isn’t apply to the button like it should, so none of the colors are applied to the button that remains white.

If I use Ionic from cdn in a html page (with no stencil.js) the problem don’t happen so I think that the problem it’s stencil.

I’ve the latest stencil version 4.11.7

I don’t understand where can be the problem, I’m stuck for hours on this…

Maybe I should downgrade stenciljs?

2

You probably have set your component to be shadowed. Remove shadow: true in your component if you except to inherits the global properties but just not it isn’t shadowed anymore afterwards.