angularcustom-properties

Angular + CSS Custom properties syntax


I've contributed to a public repo using angular 9.1.6 with the following syntax

<div [style.--color-success]="'green'" >This is a div</div>

And I got a compiled html like this

<div style="--color-success:green" >This is a div</div>

That got merged and now I use that component in my current project with angular 9.1.0 and my compiled html ignores custom properties though it keeps the style attribute

<div style>This is a div</div>

I then tried this syntax

<div [style.--color-success]="'green'" style="--color-mid:orange">This is a div</div>

giving a compiled html with one syntax but not the other

<div style="--color-mid:orange" >This is a div</div>

Is there any configuration of angular that would prevent the use of this syntax?


Solution

  • See here, seems to be fixed for Angular 9 + Ivy https://github.com/angular/angular/issues/9343#issuecomment-550572936