CSS variables not working on nested elements

[Maxwell]

** Description **
I've create the following pen: https://codepen.io/maxjf1/pen/wvMPaav

It changes the css class of a element, after clicking on the button, changing css variables.

It doesn't change the button css variable.

Is there any workarround?

** Version **
4.1.0

** To Reproduce **
Access the pen on IE11 or the following emulator
https://ie11.ieonchrome.com/#https://codepen.io/maxjf1/full/wvMPaav

[Tobias Buschor]

Hi
As the selector "body main" was not initialy seen as a element serving the variable --primary
It does not know that main is the element that serves it.

This would work:

body {
  --background: #f6d9a7;
  --text-color: #533f1c;
  --primary: #d0a967;
  font-size: 20px;
}
body main {
  --primary: #d0a967;
}
body main.alt {
  --background: #7d56e0;
  --text-color: #541b25;
  --primary: #da5160;
  font-size: 20px;
}

[Tobias Buschor]

Thanks for the feedback afterwards :)
I just changed the script to make it work, but I'm not releasing a new version yet, as I don't know how much it affects performance.

[Maxwell]

Thanks for the feedback afterwards :)
I just changed the script to make it work, but I'm not releasing a new version yet, as I don't know how much it affects performance.

Well, for me, it can affect the performance how much it wants. I will only use it for IE and IE users doesn't deserve performance 😆

Is there any place or URL i can get the beta version?

[Tobias Buschor]

Maybe you :)
But with very large pages this can cause IE11 to crash.

It affects performance: 1000 els inside 100 parents: 1000ms instead of 600ms
I dont know if it is acceptable to release...

here the beta:
https://rawcdn.githack.com/nuxodin/ie11CustomProperties/c03395cf4582d06176a377a1a4ea89bf4a38e5af/ie11CustomProperties.js

[Tobias Buschor]

As you can see, it works:
https://codepen.io/tobias_buschor/full/PoZexWL

[Maxwell]

Well, for me, it can affect the performance how much it wants. I will only use it for IE and IE users doesn't deserve performance laughing

I was kidding of course 😄

As you can see, it works:
https://codepen.io/tobias_buschor/full/PoZexWL

It Works! Perfect! thanks