CODEWITHSUNDEEP
cssaureliacustom-element
Gabriel Mančík
Gabriel Mančík

Reputation: 75

Aurelia - Overriding css binding inside custom element

What I want to achieve is to have custom element and bind css directly to this element from parent but also from within the custom element.

parent:

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

custom element:

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

But width and height properties will not be binded at the same time. Only the one which was binded (changed) last will take effect. But merging seems to work when setting class property. So is this bug or intended?

Upvotes: 1

Views: 839

Answers (1)

Erik Lieben
Erik Lieben

Reputation: 1247

Not sure if this is the way to go/ proper way of doing this, but what happens when you add a bindable CSS property to your custom element?

Like this:

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

and then in your HTML

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

Upvotes: 3

Related Questions