update elements and fix some bugs

lib/src/iron-media-query/iron-media-query.html

Index: lib/src/iron-media-query/iron-media-query.html
diff --git a/lib/src/iron-media-query/iron-media-query.html b/lib/src/iron-media-query/iron-media-query.html
index 8325eb2f7f2851cb66c4212e7042246e88e3fe90..8ddccdb1c9ac3fe9c68533498648658e1c9abe3a 100644
--- a/lib/src/iron-media-query/iron-media-query.html
+++ b/lib/src/iron-media-query/iron-media-query.html
@@ -48,23 +48,57 @@ Example:
       query: {
         type: String,
         observer: 'queryChanged'
+      },
+      
+      /**
+       * @type {function(MediaQueryList)}
+       */ 
+      _boundMQHandler: {
+        value: function() {
+          return this.queryHandler.bind(this);
+        }
+      },
+      
+      /**
+       * @type {MediaQueryList}
+       */ 
+      _mq: {
+        value: null
       }
+    },
+
+    attached: function() {
+      this.queryChanged();
+    },
 
+    detached: function() {
+      this._remove();
     },
 
-    created: function() {
-      this._mqHandler = this.queryHandler.bind(this);
+    _add: function() {
+      if (this._mq) {
+        this._mq.addListener(this._boundMQHandler);
+      }
     },
 
-    queryChanged: function(query) {
+    _remove: function() {
       if (this._mq) {
-        this._mq.removeListener(this._mqHandler);
+        this._mq.removeListener(this._boundMQHandler);
+      }
+      this._mq = null;
+    },
+
+    queryChanged: function() {
+      this._remove();
+      var query = this.query;
+      if (!query) {
+        return;
       }
       if (query[0] !== '(') {
         query = '(' + query + ')';
       }
       this._mq = window.matchMedia(query);
-      this._mq.addListener(this._mqHandler);
+      this._add();
       this.queryHandler(this._mq);
     },