diff --git a/src/state-summary/state-card-climate.html b/src/state-summary/state-card-climate.html
index bdcedab1f..95c1d88dd 100644
--- a/src/state-summary/state-card-climate.html
+++ b/src/state-summary/state-card-climate.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -56,20 +56,20 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-climate',
+class StateCardClimate extends Polymer.Element {
+  static get is() { return 'state-card-climate'; }
 
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-    stateObj: {
-      type: Object,
-    },
-  },
+  static get properties() {
+    return {
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
 
-  computeTargetTemperature: function (stateObj) {
+  computeTargetTemperature(stateObj) {
     var stateTemp = '';
 
     if (stateObj.attributes.target_temp_low &&
@@ -83,7 +83,7 @@ Polymer({
     }
 
     return stateTemp;
-  },
-
-});
+  }
+}
+customElements.define(StateCardClimate.is, StateCardClimate);
 </script>
diff --git a/src/state-summary/state-card-configurator.html b/src/state-summary/state-card-configurator.html
index 499c382c6..618aca426 100644
--- a/src/state-summary/state-card-configurator.html
+++ b/src/state-summary/state-card-configurator.html
@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -32,18 +32,18 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-configurator',
+class StateCardConfigurator extends Polymer.Element {
+  static get is() { return 'state-card-configurator'; }
 
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-});
+  static get properties() {
+    return {
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+}
+customElements.define(StateCardConfigurator.is, StateCardConfigurator);
 </script>
diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index 1d18d7269..73643e839 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -22,13 +22,11 @@ class StateCardContent extends Polymer.Element {
   static get properties() {
     return {
       hass: Object,
-
+      stateObj: Object,
       inDialog: {
         type: Boolean,
         value: false,
       },
-
-      stateObj: Object,
     };
   }
 
diff --git a/src/state-summary/state-card-cover.html b/src/state-summary/state-card-cover.html
index 552496d47..a079784a8 100644
--- a/src/state-summary/state-card-cover.html
+++ b/src/state-summary/state-card-cover.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -27,34 +27,28 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-cover',
+class StateCardCover extends Polymer.Element {
+  static get is() { return 'state-card-cover'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+      entityObj: {
+        type: Object,
+        computed: 'computeEntityObj(hass, stateObj)',
+      },
+    };
+  }
 
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    entityObj: {
-      type: Object,
-      computed: 'computeEntityObj(hass, stateObj)',
-    },
-
-  },
-
-  computeEntityObj: function (hass, stateObj) {
+  computeEntityObj(hass, stateObj) {
     var entity = new window.CoverEntity(hass, stateObj);
     return entity;
-  },
-
-});
+  }
+}
+customElements.define(StateCardCover.is, StateCardCover);
 </script>
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index c0bf72fd8..e6c807f6f 100644
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -26,22 +26,22 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-display',
+class StateCardDisplay extends Polymer.Element {
+  static get is() { return 'state-card-display'; }
 
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
+  static get properties() {
+    return {
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
 
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  computeStateDisplay: function (stateObj) {
+  computeStateDisplay(stateObj) {
     return window.hassUtil.computeStateState(stateObj);
-  },
-});
+  }
+}
+customElements.define(StateCardDisplay.is, StateCardDisplay);
 </script>
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
index c2a50f226..eef5a253d 100644
--- a/src/state-summary/state-card-input_select.html
+++ b/src/state-summary/state-card-input_select.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
@@ -42,38 +42,33 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-input_select',
+class StateCardInputSelect extends Polymer.Element {
+  static get is() { return 'state-card-input_select'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+      selectedOption: {
+        type: String,
+        observer: 'selectedOptionChanged',
+      },
+    };
+  }
 
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    selectedOption: {
-      type: String,
-      observer: 'selectedOptionChanged',
-    },
-  },
-
-  computeStateName: function (stateObj) {
+  computeStateName(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
-  },
+  }
 
-  computeSelected: function (stateObj) {
+  computeSelected(stateObj) {
     return stateObj.attributes.options.indexOf(stateObj.state);
-  },
+  }
 
-  selectedOptionChanged: function (option) {
+  selectedOptionChanged(option) {
     // Selected Option will transition to '' before transitioning to new value
     if (option === '' || option === this.stateObj.state) {
       return;
@@ -82,10 +77,11 @@ Polymer({
       option: option,
       entity_id: this.stateObj.entity_id,
     });
-  },
+  }
 
-  stopPropagation: function (ev) {
+  stopPropagation(ev) {
     ev.stopPropagation();
-  },
-});
+  }
+}
+customElements.define(StateCardInputSelect.is, StateCardInputSelect);
 </script>
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index b8fa04b61..5d1d410fd 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -46,32 +46,27 @@
 </dom-module>
 
 <script>
-Polymer({
-  PLAYING_STATES: ['playing', 'paused'],
-  is: 'state-card-media_player',
+class StateCardMediaPlayer extends Polymer.Element {
+  static get is() { return 'state-card-media_player'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+      playerObj: {
+        type: Object,
+        computed: 'computePlayerObj(hass, stateObj)',
+      },
+    };
+  }
 
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    playerObj: {
-      type: Object,
-      computed: 'computePlayerObj(hass, stateObj)',
-    },
-  },
-
-  computePlayerObj: function (hass, stateObj) {
+  computePlayerObj(hass, stateObj) {
     return new window.MediaPlayerEntity(hass, stateObj);
-  },
-});
+  }
+}
+customElements.define(StateCardMediaPlayer.is, StateCardMediaPlayer);
 </script>
diff --git a/src/state-summary/state-card-scene.html b/src/state-summary/state-card-scene.html
index d2a441e4b..2d81bf04e 100644
--- a/src/state-summary/state-card-scene.html
+++ b/src/state-summary/state-card-scene.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -27,30 +27,27 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-scene',
+class StateCardScene extends Polymer.Element {
+  static get is() { return 'state-card-scene'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
 
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  activateScene: function (ev) {
+  activateScene(ev) {
     ev.stopPropagation();
     this.hass.callService(
       'scene', 'turn_on',
       { entity_id: this.stateObj.entity_id }
     );
-  },
-});
+  }
+}
+customElements.define(StateCardScene.is, StateCardScene);
 </script>
diff --git a/src/state-summary/state-card-script.html b/src/state-summary/state-card-script.html
index 1a8afdeac..fec8103c1 100644
--- a/src/state-summary/state-card-script.html
+++ b/src/state-summary/state-card-script.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -37,26 +37,26 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-script',
+class StateCardScript extends Polymer.Element {
+  static get is() { return 'state-card-script'; }
 
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
+  static get properties() {
+    return {
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
 
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  fireScript: function (ev) {
+  fireScript(ev) {
     ev.stopPropagation();
     this.hass.callService(
       'script', 'turn_on',
       { entity_id: this.stateObj.entity_id }
     );
-  },
-});
+  }
+}
+customElements.define(StateCardScript.is, StateCardScript);
 </script>
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
index 4a1ee99eb..467cc175a 100644
--- a/src/state-summary/state-card-toggle.html
+++ b/src/state-summary/state-card-toggle.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -23,22 +23,19 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-toggle',
+class StateCardToggle extends Polymer.Element {
+  static get is() { return 'state-card-toggle'; }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-});
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
+}
+customElements.define(StateCardToggle.is, StateCardToggle);
 </script>
diff --git a/src/state-summary/state-card-weblink.html b/src/state-summary/state-card-weblink.html
index 386f388ba..9bf39f1f1 100644
--- a/src/state-summary/state-card-weblink.html
+++ b/src/state-summary/state-card-weblink.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
 
 <link rel="import" href="../components/entity/state-badge.html">
 
@@ -25,32 +25,33 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-weblink',
+class StateCardWeblink extends Polymer.Element {
+  static get is() { return 'state-card-weblink'; }
 
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
+  static get properties() {
+    return {
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
 
-    stateObj: {
-      type: Object,
-    },
-  },
+  ready() {
+    super.ready();
+    this.addEventListener('tap', ev => this.onTap(ev));
+  }
 
-  listeners: {
-    tap: 'onTap',
-  },
-
-  computeStateName: function (stateObj) {
+  computeStateName(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
-  },
+  }
 
-  onTap: function (ev) {
+  onTap(ev) {
     ev.stopPropagation();
     ev.preventDefault();
     window.open(this.stateObj.state, '_blank');
-  },
-});
+  }
+}
+customElements.define(StateCardWeblink.is, StateCardWeblink);
 </script>
diff --git a/src/util/ha-pref-storage.html b/src/util/ha-pref-storage.html
index 9e76e71d6..ac31a5eb6 100644
--- a/src/util/ha-pref-storage.html
+++ b/src/util/ha-pref-storage.html
@@ -1,26 +1,25 @@
 <script>
-(function () {
-  var STORED_STATE = [
+{
+  const STORED_STATE = [
     'dockedSidebar',
     'selectedTheme',
     'selectedLanguage',
   ];
 
-  Polymer({
-    is: 'ha-pref-storage',
+  class HaPrefStorage extends Polymer.Element {
+    static get is() { return 'ha-pref-storage'; }
 
-    properties: {
-      hass: {
-        type: Object,
-      },
+    static get properties() {
+      return {
+        hass: Object,
+        storage: {
+          type: Object,
+          value: window.localStorage || {},
+        },
+      };
+    }
 
-      storage: {
-        type: Object,
-        value: window.localStorage || {},
-      },
-    },
-
-    storeState: function () {
+    storeState() {
       if (!this.hass) return;
 
       try {
@@ -32,9 +31,9 @@
       } catch (err) {
         // Safari throws exception in private mode
       }
-    },
+    }
 
-    getStoredState: function () {
+    getStoredState() {
       var state = {};
 
       for (var i = 0; i < STORED_STATE.length; i++) {
@@ -46,6 +45,7 @@
 
       return state;
     }
-  });
-}());
+  }
+  customElements.define(HaPrefStorage.is, HaPrefStorage);
+}
 </script>
diff --git a/src/util/ha-url-sync.html b/src/util/ha-url-sync.html
index 3d5510f33..38caac2c5 100644
--- a/src/util/ha-url-sync.html
+++ b/src/util/ha-url-sync.html
@@ -1,19 +1,21 @@
 <script>
-(function () {
+{
   /* eslint-disable no-console */
-  var DEBUG = false;
+  const DEBUG = false;
 
-  Polymer({
-    is: 'ha-url-sync',
+  class HaUrlSync extends Polymer.Element {
+    static get is() { return 'ha-url-sync'; }
 
-    properties: {
-      hass: {
-        type: Object,
-        observer: 'hassChanged',
-      },
-    },
+    static get properties() {
+      return {
+        hass: {
+          type: Object,
+          observer: 'hassChanged',
+        },
+      };
+    }
 
-    hassChanged: function (newHass, oldHass) {
+    hassChanged(newHass, oldHass) {
       if (this.ignoreNextHassChange) {
         if (DEBUG) console.log('ignore hasschange');
         this.ignoreNextHassChange = false;
@@ -30,9 +32,9 @@
         this.ignoreNextPopstate = true;
         history.back();
       }
-    },
+    }
 
-    popstateChangeListener: function (ev) {
+    popstateChangeListener(ev) {
       if (this.ignoreNextPopstate) {
         if (DEBUG) console.log('ignore popstate');
         this.ignoreNextPopstate = false;
@@ -46,18 +48,21 @@
         this.ignoreNextHassChange = true;
         this.fire('hass-more-info', { entityId: null });
       }
-    },
+    }
 
-    attached: function () {
+    connectedCallback() {
+      super.connectedCallback();
       this.ignoreNextPopstate = false;
       this.ignoreNextHassChange = false;
       this.popstateChangeListener = this.popstateChangeListener.bind(this);
       window.addEventListener('popstate', this.popstateChangeListener);
-    },
+    }
 
-    detached: function () {
+    disconnectedCallback() {
+      super.disconnectedCallback();
       window.removeEventListener('popstate', this.popstateChangeListener);
     }
-  });
-}());
+  }
+  customElements.define(HaUrlSync.is, HaUrlSync);
+}
 </script>