Angular style binding variable name get converted to kebab-case

Question

I need to bind custom css variable using Angular style binding. When I'm using variable with camelCase, it get converted to kebab-case automatically, and I don't know why.

It' seems that this is not a default behaviour of Angular. Because this does not happened on new created Angular project, but only occured in this template I'm using (Vuexy): https://pixinvent.com/demo/vuexy-angular-admin-dashboard-template/landing/

This is how I add my css variable:

<div class="line-clamp" [style.--lineClamp]="2">
    {{ data }}
</div>

And this is the result I get:

--line-clamp: 2

.line-clamp {
    --lineClamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lineClamp);
    text-overflow: ellipsis;
    overflow: hidden;

As you can see the variable name is auto convert from camelCase to kebab-case. Of course to quickly solve the problem I can just use kebab-case, but I want to know what is the cause, anyone has the same experience?

Answer 1

After some researches, found that it was a bug.

https://github.com/angular/angular/issues/41364

And I solve this issue by updating my project version, from version 11.2.1 to latest version of 11