Shadow DOM

Ionic Framework ionic-v3
1

One of the major changes in Ionic is the Shadow DOM, and basically I like the Shadow DOM principles, but as we have customized a lot of the components in Ionic I am having some trouble figuring out where to make the changes.

Basically the Shadow DOM prevents me from applying a custom style but even for supported customizations it is difficult to find the right solution

Example: All button text are capitalized, but in Ionic 3 I could add

$button-md-text-transform: none;

in variable.scss

How should that be implemented in version 4?

2

open your global.scss and write this

ion-button{
  text-transform:none !important;
}
3

It looks like adding

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$button-md-text-transform: none;

in variables.scss also is doing the trick

4

These sass variables seem to be used to style components and prefill css4 variables to be overwritten by users (if u look at ionic 4 code)

Will be interesting to see how this evolves in the dev community/documentation and affect apps when components are updated by Ionic

Seems that Ionic only wants developers to use css4 variables. So not sure if the above suggested sass solution is sustainable in long run then