title: Aurelia: data binding issue with the primary property of a custom attribute
body: <p>I am learning about Aurelia for a few weeks now and I seem to have a data binding issue with a custom attribute.</p>
  <p>I have created the following <code>square</code> custom attribute (based on the examples from the <a href="https://aurelia.io/docs/templating/custom-attributes" rel="nofollow noreferrer">&quot;Templating:Custom Attributes&quot; guide on the Aurelia website</a>):</p>
  <p><strong>square.ts:</strong></p>
  <pre class="lang-ts prettyprint-override"><code>import { bindable, autoinject } from &quot;aurelia-framework&quot;;
  
  @autoinject
  export class SquareCustomAttribute {
    @bindable sideLength = &quot;100px&quot;;
    @bindable color = &quot;red&quot;;
  
    constructor(private element: Element) {
      this.sideLengthChanged(this.sideLength);
      this.colorChanged(this.color);
    }
  
    sideLengthChanged(newValue: string) {
      if (this.element instanceof HTMLElement) {
        this.element.style.width = this.element.style.height = newValue;
      }
    }
  
    colorChanged(newValue: string) {
      if (this.element instanceof HTMLElement) {
        this.element.style.backgroundColor = newValue;
      }
    }
  }
  </code></pre>
  <p>I would like this custom attribute to be usable without explicitly binding it, in which case it should use the default values, like in this consuming view:</p>
  <p><strong>app.html:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;require from=&quot;./square&quot;&gt;&lt;/require&gt;
    &lt;div square&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The code above works fine. It renders the <code>div</code> as a square with 100px sides and a red background.</p>
  <p>Problems arise when I set the <code>color</code> property of <code>SquareCustomAttribute</code> as the primary property (using <code>@bindable</code>'s configuration object parameter) like this:</p>
  <p><strong>Updated square.ts:</strong></p>
  <pre class="lang-ts prettyprint-override"><code>import { bindable, autoinject } from &quot;aurelia-framework&quot;;
  
  @autoinject
  export class SquareCustomAttribute {
    @bindable sideLength = &quot;100px&quot;;
    @bindable({ primaryProperty: true }) color = &quot;red&quot;;
  
    constructor(private element: Element) {
      this.sideLengthChanged(this.sideLength);
      this.colorChanged(this.color);
    }
  
    sideLengthChanged(newValue: string) {
      if (this.element instanceof HTMLElement) {
        this.element.style.width = this.element.style.height = newValue;
      }
    }
  
    colorChanged(newValue: string) {
      if (this.element instanceof HTMLElement) {
        this.element.style.backgroundColor = newValue;
      }
    }
  }
  </code></pre>
  <p>For some reason, setting <code>color</code> as the primary property of the custom attribute, the <code>colorChanged</code> callback gets invoked twice now: first by the constructor with the default value and then once more from somewhere in the lifecycle initialization with an empty value.</p>
  <p>How can I avoid this second invocation of the <code>colorChanged</code> callback, so that the default value of the primary property of my custom attribute will not be cleared when I do not explicitly supply a binding/value of the <code>square</code> attribute in the consuming view's HTML markup?</p>