red-custom-attribute.js

import { inject, bindable } from "aurelia-framework";

@inject(Element)
export class RedCustomAttribute {
    constructor(element) {
    
    }
    
    @bindable value;

    valueChanged(newValue) {
        if (newValue < 0) {
            this.element.className += " red";
        } else {
            this.element.className = this.element.className.replace("red", "");   
        }
    }
}