🐞 bug report

Affected Package

The issue is caused when using HostBinding that is from @angular/core

Is this a regression?

I don't think it ever worked

Description

Custom CSS properties set in HostBinding get automatically transformed to kebab case ignoring the original casing. For example @HostBinding("style.--MyColor") color: "blue" instead of setting the custom property --MyColor actually sets the property --my-color.
This goes against CSS Custom Properties specification that explicitly says that custom properties are case sensitive, here the specification: https://www.w3.org/TR/css-variables-1/#defining-variables

Unlike other CSS properties, custom property names are case-sensitive

The expected behavior is that CSS Custom Properties are kept unchanged when specified in HostBinding

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-6kturm
This example shows that HostBinding transform the custom properties to kebab case.

🌍 Your Environment

Angular Version:

11.0.8