diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index e815f2be6e..a718285340 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.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,7 +46,6 @@
           max-width: 600px;
         }
       }
-
     </style>
 
     <div class='main'>
@@ -77,11 +76,9 @@
 </dom-module>
 
 <script>
-(function () {
-  'use strict';
-
+{
   // mapping domain to size of the card.
-  var DOMAINS_WITH_CARD = {
+  const DOMAINS_WITH_CARD = {
     camera: 4,
     history_graph: 4,
     media_player: 3,
@@ -95,7 +92,7 @@
   // groups: X
   // rest: 100
 
-  var PRIORITY = {
+  const PRIORITY = {
     // before groups < 0
     configurator: -20,
     persistent_notification: -15,
@@ -119,9 +116,9 @@
   }
 
   function entitySortBy(entityA, entityB) {
-    var nameA = (entityA.attributes.friendly_name ||
+    const nameA = (entityA.attributes.friendly_name ||
                  entityA.entity_id).toLowerCase();
-    var nameB = (entityB.attributes.friendly_name ||
+    const nameB = (entityB.attributes.friendly_name ||
                  entityB.entity_id).toLowerCase();
 
     if (nameA < nameB) {
@@ -135,61 +132,53 @@
 
   function iterateDomainSorted(collection, func) {
     Object.keys(collection)
-      .map(function (key) { return collection[key]; })
+      .map(key => collection[key])
       .sort(sortPriority)
-      .forEach(function (domain) {
+      .forEach((domain) => {
         domain.states.sort(entitySortBy);
         func(domain);
       });
   }
 
-  var computeDomain = window.hassUtil.computeDomain;
+  const computeDomain = window.hassUtil.computeDomain;
 
-  Polymer({
-    is: 'ha-cards',
+  class HaCards extends Polymer.Element {
+    static get is() { return 'ha-cards'; }
+    static get properties() {
+      return {
+        hass: Object,
 
-    properties: {
-      hass: {
-        type: Object,
-      },
+        showIntroduction: {
+          type: Boolean,
+          value: false,
+        },
 
-      showIntroduction: {
-        type: Boolean,
-        value: false,
-      },
+        columns: {
+          type: Number,
+          value: 2,
+        },
 
-      columns: {
-        type: Number,
-        value: 2,
-      },
+        states: Object,
+        panelVisible: Boolean,
 
-      states: {
-        type: Object,
-      },
+        viewVisible: {
+          type: Boolean,
+          value: false,
+        },
 
-      panelVisible: {
-        type: Boolean,
-      },
+        orderedGroups: Array,
 
-      viewVisible: {
-        type: Boolean,
-        value: false,
-      },
+        cards: Object,
+      };
+    }
 
-      orderedGroups: {
-        type: Array,
-      },
+    static get observers() {
+      return [
+        'updateCards(columns, states, showIntroduction, panelVisible, viewVisible, orderedGroups)',
+      ];
+    }
 
-      cards: {
-        type: Object,
-      },
-    },
-
-    observers: [
-      'updateCards(columns, states, showIntroduction, panelVisible, viewVisible, orderedGroups)',
-    ],
-
-    updateCards: function (
+    updateCards(
       columns,
       states,
       showIntroduction,
@@ -200,33 +189,36 @@
       if (!panelVisible || !viewVisible) {
         return;
       }
-      this.debounce('updateCards', function () {
-        // Things might have changed since it got scheduled.
-        if (this.panelVisible && this.viewVisible) {
-          this.cards = this.computeCards(columns, states, showIntroduction, orderedGroups);
+      this._debouncer = Polymer.Debouncer.debounce(
+        this._debouncer,
+        Polymer.Async.timeOut.after(10),
+        () => {
+          // Things might have changed since it got scheduled.
+          if (this.panelVisible && this.viewVisible) {
+            this.cards = this.computeCards(columns, states, showIntroduction, orderedGroups);
+          }
         }
-      }.bind(this), 10);
-    },
+      );
+    }
 
-    computeCards: function (columns, states, showIntroduction, orderedGroups) {
-      var hass = this.hass;
+    computeCards(columns, states, showIntroduction, orderedGroups) {
+      const hass = this.hass;
 
-      var cards = {
+      const cards = {
         demo: false,
         badges: [],
         columns: [],
       };
-      var entityCount = [];
-      var i;
-      for (i = 0; i < columns; i++) {
+      const entityCount = [];
+      for (let i = 0; i < columns; i++) {
         cards.columns.push([]);
         entityCount.push(0);
       }
 
       // Find column with < 5 entities, else column with lowest count
       function getIndex(size) {
-        var minIndex = 0;
-        for (i = 0; i < entityCount.length; i++) {
+        let minIndex = 0;
+        for (let i = 0; i < entityCount.length; i++) {
           if (entityCount[i] < 5) {
             minIndex = i;
             break;
@@ -250,19 +242,15 @@
       }
 
       function addEntitiesCard(name, entities, groupEntity) {
-        var owncard;
-        var other;
-        var size;
-        var curIndex;
         if (entities.length === 0) return;
 
-        owncard = [];
-        other = [];
+        const owncard = [];
+        const other = [];
 
-        size = 0;
+        let size = 0;
 
-        entities.forEach(function (entity) {
-          var domain = computeDomain(entity);
+        entities.forEach((entity) => {
+          const domain = computeDomain(entity);
 
           if (domain in DOMAINS_WITH_CARD) {
             owncard.push(entity);
@@ -276,7 +264,7 @@
         // Add 1 to the size if we're rendering entities card
         size += other.length > 0;
 
-        curIndex = getIndex(size);
+        const curIndex = getIndex(size);
 
         if (other.length > 0) {
           cards.columns[curIndex].push({
@@ -287,7 +275,7 @@
           });
         }
 
-        owncard.forEach(function (entity) {
+        owncard.forEach((entity) => {
           cards.columns[curIndex].push({
             hass: hass,
             cardType: computeDomain(entity),
@@ -296,7 +284,7 @@
         });
       }
 
-      var splitted = window.HAWS.splitByGroups(states);
+      const splitted = window.HAWS.splitByGroups(states);
       if (orderedGroups) {
         splitted.groups.sort((gr1, gr2) => orderedGroups[gr1.entity_id] -
           orderedGroups[gr2.entity_id]);
@@ -304,21 +292,21 @@
         splitted.groups.sort((gr1, gr2) => gr1.attributes.order - gr2.attributes.order);
       }
 
-      var badgesColl = {};
-      var beforeGroupColl = {};
-      var afterGroupedColl = {};
+      const badgesColl = {};
+      const beforeGroupColl = {};
+      const afterGroupedColl = {};
 
-      Object.keys(splitted.ungrouped).forEach(function (key) {
-        var state = splitted.ungrouped[key];
-        var domain = computeDomain(state);
+      Object.keys(splitted.ungrouped).forEach((key) => {
+        const state = splitted.ungrouped[key];
+        const domain = computeDomain(state);
 
         if (domain === 'a') {
           cards.demo = true;
           return;
         }
 
-        var priority = getPriority(domain);
-        var coll;
+        const priority = getPriority(domain);
+        let coll;
 
         if (priority < 0) {
           coll = beforeGroupColl;
@@ -339,36 +327,33 @@
         coll[domain].states.push(state);
       });
 
-      iterateDomainSorted(badgesColl, function (domain) {
+      iterateDomainSorted(badgesColl, (domain) => {
         cards.badges.push.apply(cards.badges, domain.states);
       });
 
-      iterateDomainSorted(beforeGroupColl, function (domain) {
+      iterateDomainSorted(beforeGroupColl, (domain) => {
         addEntitiesCard(domain.domain, domain.states);
       });
 
-      splitted.groups.forEach(function (groupState) {
-        var entities = window.HAWS.getGroupEntities(states, groupState);
+      splitted.groups.forEach((groupState) => {
+        const entities = window.HAWS.getGroupEntities(states, groupState);
         addEntitiesCard(
           groupState.entity_id,
-          Object.keys(entities).map(function (key) {
-            return entities[key];
-          }),
+          Object.keys(entities).map(key => entities[key]),
           groupState
         );
       });
 
-      iterateDomainSorted(afterGroupedColl, function (domain) {
+      iterateDomainSorted(afterGroupedColl, (domain) => {
         addEntitiesCard(domain.domain, domain.states);
       });
 
       // Remove empty columns
-      cards.columns = cards.columns.filter(function (val) {
-        return val.length > 0;
-      });
+      cards.columns = cards.columns.filter(val => val.length > 0);
 
       return cards;
-    },
-  });
-}());
+    }
+  }
+  customElements.define(HaCards.is, HaCards);
+}
 </script>