vue.js - Change background color of ion-page element only, not descendent elements, in Ionic Vue

Question

I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:

.ion-page {
  --ion-background-color: red;
}

...but this doesn't:

.ion-page {
  background-color: red;
}

Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.

Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)

question from:https://stackoverflow.com/questions/65849102/change-background-color-of-ion-page-element-only-not-descendent-elements-in-io

Answer 1

The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:

.ion-page {
  --background: red;
}

I didn't previously realise there were different sets of CSS variables for different scopes.