Style CSS properties on an element inside of a shadow tree

muzamilabbas — Sun, 21 Feb 2021 12:47:33 +0000

After introducing Shadow DOM in IONIC most of us searching and finding a way to modify style of IONIC components. Fortunately they have exposed many css4 variables to modify the components but we can't access the html elements inside the Shadow DOM.

How to update style using exposed css4 variables?

ion-button{
  --border-radius: 2px;
  --background: #3A2926;
  --color: #DBE0A5;
}

How to update style of properties that are not exposed?

In the above screenshot we cannot modify the properties like cursor, z-index, box-sizing etc. from outside the Shadow DOM using normal CSS like following style.

ion-button button{
  cursor: crosshair;
  z-index: 2;
  box-sizing: content-box;
}

How to update above properties

We can use Shadow Part selector to update the these properties.

ion-button{
  &::part(native) {
    cursor: crosshair;
    z-index: 2;
    box-sizing: content-box;
  }
}

I hope this will help many developers.

Resources

https://ionicframework.com/docs
https://ionicframework.com/docs/theming/css-shadow-parts

DEV Community: muzamilabbas

Style CSS properties on an element inside of a shadow tree

How to update style using exposed css4 variables?

How to update style of properties that are not exposed?

How to update above properties

Resources