I’m facing some problems with theming ionic components (v4) and shadow DOM. In my ionic-pwa from stencil I even don’t get it to work.
<ion-button fill="solid" expand="full" color="success">Success</ion-button>
Without shadow DOM enabled this results in a success button as expected.
With shadow DOM enabled, the ion-color-base variable doesn’t seem to point to the success color.
To reproduce it:
- Install https://github.com/ionic-team/ionic-pwa-toolkit
- Go to this file: https://github.com/ionic-team/ionic-pwa-toolkit/blob/master/src/components/app-home/app-home.tsx
- add ‘shadow: true’ after rule 5.
- add ‘color=“success”’ to the ion-button