diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index dd3c86e26c..546e6e822b 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.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="state-card-climate.html">
 <link rel="import" href="state-card-configurator.html">
@@ -12,56 +12,49 @@
 <link rel="import" href="state-card-toggle.html">
 <link rel="import" href="state-card-weblink.html">
 
+<link rel="import" href="../util/hass-util.html">
+
 <script>
-Polymer({
-  is: 'state-card-content',
+class StateCardContent extends Polymer.Element {
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get is() { return 'state-card-content'; }
 
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
+  static get properties() {
+    return {
+      hass: Object,
 
-    stateObj: {
-      type: Object,
-    },
-  },
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
 
-  observers: [
-    'inputChanged(hass, inDialog, stateObj)',
-  ],
+      stateObj: Object,
+    };
+  }
 
-  _ensureCustomUILoaded: function (stateType) {
-    this.importHref(
-        '/local/custom_ui/state-card-' + stateType + '.html',
-        function () {},
-        /* eslint-disable no-console */
-        function () { console.error('Error loading %s from /local/custom_ui/state-card-%s.html', stateType, stateType); },
-        /* eslint-enable no-console */
-        true);
-  },
+  static get observers() {
+    return [
+      'inputChanged(hass, inDialog, stateObj)',
+    ];
+  }
 
-  inputChanged: function (hass, inDialog, stateObj) {
-    var stateCardType;
+  inputChanged(hass, inDialog, stateObj) {
+    let stateCardType;
     if (!stateObj || !hass) return;
     if (stateObj.attributes && 'custom_ui_state_card' in stateObj.attributes) {
       stateCardType = stateObj.attributes.custom_ui_state_card;
-      this._ensureCustomUILoaded(stateCardType);
     } else {
-      stateCardType = window.hassUtil.stateCardType(hass, stateObj);
+      stateCardType = 'state-card-' + window.hassUtil.stateCardType(hass, stateObj);
     }
     window.hassUtil.dynamicContentUpdater(
       this,
-      ('STATE-CARD-' + stateCardType.toUpperCase()),
+      stateCardType.toUpperCase(),
       {
         hass: hass,
         stateObj: stateObj,
         inDialog: inDialog,
       });
-  },
-});
+  }
+}
+customElements.define(StateCardContent.is, StateCardContent);
 </script>