Why do Polymer's computed properties need explicit property arguments?

Question

I was digging a bit into the Polymer 1.0 elements and I am a little curious about the computed properties.

For example, in paper-drawer-panel.html,

<dom-module id="paper-drawer-panel" …>
  …
  <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]">
    …
  </div>
  …
</dom-module>
<script>
Polymer({
  is: 'paper-drawer-panel',
  …
  _computeDrawerStyle: function(drawerWidth) {
    return 'width:' + drawerWidth + ';';
  },
  …
</script>

drawerWidth is a property of paper-drawer-panel, so why is it so important to explicitly include it in the parameters of the computed property?

Is

[[_computeDrawerStyle()]]

…

_computeDrawerStyle: function () {
  return 'width:' + this.drawerWidth + ';';
}

Is this bad practice?

Answer 1

Explicit arguments in computed bindings serve an important purpose: telling Polymer which properties the computed binding depends on. This allows Polymer to know when to recalculate and update the computed binding.

Take [[_computeDrawerStyle()]], for example. In this case, Polymer has no idea what other properties the computed binding depends on, and will only calculate it once on load.

As soon as you add drawerWidth explicitly ([[_computeDrawerStyle(drawerWidth)]]) Polymer now knows that it should run the computed binding again for a new value every time drawerWidth changes.