For complicated elements, is is a good practice to (almost) always have Polymer definition inside a closure to keep all the variables and methods which should only be modified internally private, as opposed to attaching them to the element (e.g. 'this')?
Like following:
<polymer-element name="animating-element">
<script>
(function() {
var privateObj = {};
privateObj.internalState = 0;
//private static method
privateObject.setupState = function(polymerObject) {
if(polymerObject.stateExposedToOutside == /* some conditions */) {
privateObject.internalState = 1;
}
}
Polymer('animating-element', {
stateExposedToOutside: 0,
ready: function() {
privateObj.setupState(this);
this.animate();
},
animate: function() {
}
});
})();
</script>
</polymer-element>
No! There is one major problem with above code. Since privateObj is sealed by the closure, it is static (e.g. shared among all the instances of that component) and cannot keep the state for each of them.
Moreover the idea is that the state of each component solely be determined by its attributes so keeping an internal state object should be avoided.