1 files changed, 16 insertions, 7 deletions

diff --git a/node_modules/montage/ui/component.js b/node_modules/montage/ui/component.js
index 69559fc1..17f87b62 100755
--- a/node_modules/montage/ui/component.js
+++ b/node_modules/montage/ui/component.js
@@ -136,23 +136,32 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         },
         set: function(value) {
             if (value == null) {
-                console.log("Warning: Tried to set element of ", this, " as " + value + ".");
+                console.warn("Tried to set element of ", this, " to ", value);
                 return;
             }
 
-            this.eventManager.registerEventHandlerForElement(this, value);
-
             if (this.isDeserializing) {
+                this.eventManager.registerEventHandlerForElement(this, value);
+
                 // if this component has a template and has been already instantiated then assume the value is the template.
                 if (this._isTemplateInstantiated) {
-                    this._templateElement = value;
+                    // this is important for component extension, we don't want to override template element
+                    if (!this._templateElement) {
+                        this._templateElement = value;
+                    }
                 } else {
                     this._element = value;
                     if (!this.blockDrawGate.value && this._element) {
                         this.blockDrawGate.setField("element", true);
                     }
                 }
+            } else if (!this._firstDraw) {
+                // If a draw has happened then at some point the element has been set
+                console.error("Cannot change element of ", this, " after it has been set");
+                return;
             } else {
+                this.eventManager.registerEventHandlerForElement(this, value);
+
                 this._element = value;
                 if (!this.blockDrawGate.value && this._element) {
                     this.blockDrawGate.setField("element", true);
@@ -614,9 +623,9 @@ var Component = exports.Component = Montage.create(Montage,/** @lends module:mon
         }
     },
 
-    serializeSelf: {
-        value: function(serializer, propertyNames) {
-            serializer.setProperties(propertyNames);
+    serializeProperties: {
+        value: function(serializer) {
+            serializer.setAll();
             var childComponents = this.childComponents;
             for (var i = 0, l = childComponents.length; i < l; i++) {
                 serializer.addObject(childComponents[i]);