theming inside shadow dom - v4

Ionic Framework
1

Hi All,

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.

For example:
<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:

  1. Install https://github.com/ionic-team/ionic-pwa-toolkit
  2. Go to this file: https://github.com/ionic-team/ionic-pwa-toolkit/blob/master/src/components/app-home/app-home.tsx
  3. add ‘shadow: true’ after rule 5.
  4. add ‘color=“success”’ to the ion-button

Regards, Peter