Aurelia - Overriding css binding inside custom element -

what want achieve have custom element , bind css directly element parent within custom element.

parent:

<div>    <custom-element css="height: ${heightproperty}"></custom-element> </div> 

custom element:

<template css="width: ${widthproperty}"> </template> 

but width , height properties not binded @ same time. 1 binded (changed) last take effect. merging seems work when setting class property. bug or intended?

not sure if way go/ proper way of doing this, happens when add bindable css property custom element?

like this:

import { bindable } 'aurelia-framework'; export class customelement {   @bindable()   css = ''; } 

and in html

<template css="width: ${widthproperty} ${css}"> </template>