Estoy tratando de hacer que un componente sea personalizable al tener el color como entrada. Al final, quiero poder usar el componente como este <component-name color="myColor"></component-name> :

Para empezar, estoy tratando de configurar la variable css usando hostbinding, así:

 @HostBinding('style.--color') myColor: string = '--blue'

 :host { --blue: #5dbbbb; --green: #286e22; background-color: var(--color); }

Pero el azul nunca se rinde. Si inspecciono el componente en cromo, puedo ver que tiene "background-color: --color" . Cuando miro la variable, se define como --color: --blue

Funciona bien si uso el código hexadecimal directamente (@HostBinding('style.--color') myColor: string = '#xxxxxx') en lugar de la variable css para el color, pero quiero evitar eso si es posible. ¿Alguna idea sobre lo que podría estar mal? Estoy usando Angular14.