diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js
index ec213ca860..aa373d6c0c 100644
--- a/src/cards/ha-entities-card.js
+++ b/src/cards/ha-entities-card.js
@@ -46,7 +46,7 @@ class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
 
     <ha-card>
       <template is="dom-if" if="[[title]]">
-        <div class\$="[[computeTitleClass(groupEntity)]]" on-click="entityTapped">
+        <div class$="[[computeTitleClass(groupEntity)]]" on-click="entityTapped">
           <div class="flex name">[[title]]</div>
           <template is="dom-if" if="[[showGroupToggle(groupEntity, states)]]">
             <ha-entity-toggle hass="[[hass]]" state-obj="[[groupEntity]]"></ha-entity-toggle>
@@ -55,7 +55,7 @@ class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </template>
       <div class="states">
         <template is="dom-repeat" items="[[states]]" on-dom-change="addTapEvents">
-          <div class\$="[[computeStateClass(item)]]">
+          <div class$="[[computeStateClass(item)]]">
             <state-card-content hass="[[hass]]" class="state-card" state-obj="[[item]]"></state-card-content>
           </div>
         </template>
diff --git a/src/cards/ha-history_graph-card.js b/src/cards/ha-history_graph-card.js
index fb3cd68914..d1de477231 100644
--- a/src/cards/ha-history_graph-card.js
+++ b/src/cards/ha-history_graph-card.js
@@ -40,7 +40,7 @@ class HaHistoryGraphCard extends EventsMixin(PolymerElement) {
       }
     </style>
     <ha-state-history-data hass="[[hass]]" filter-type="recent-entity" entity-id="[[computeHistoryEntities(stateObj)]]" data="{{stateHistory}}" is-loading="{{stateHistoryLoading}}" cache-config="[[cacheConfig]]"></ha-state-history-data>
-    <paper-card dialog\$="[[inDialog]]" on-click="cardTapped" elevation="[[computeElevation(inDialog)]]">
+    <paper-card dialog$="[[inDialog]]" on-click="cardTapped" elevation="[[computeElevation(inDialog)]]">
       <div class="header">[[computeTitle(stateObj)]]</div>
       <div class="content">
          <state-history-charts hass="[[hass]]" history-data="[[stateHistory]]" is-loading-data="[[stateHistoryLoading]]" up-to-now no-single>
diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js
index 20acffae2f..cce9491067 100644
--- a/src/cards/ha-media_player-card.js
+++ b/src/cards/ha-media_player-card.js
@@ -156,7 +156,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       }
     </style>
 
-    <div class\$="[[computeBannerClasses(playerObj)]]">
+    <div class$="[[computeBannerClasses(playerObj)]]">
       <div class="cover" id="cover"></div>
 
       <div class="caption">
@@ -166,15 +166,15 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </div>
     </div>
 
-    <paper-progress max="[[stateObj.attributes.media_duration]]" value="[[playbackPosition]]" hidden\$="[[computeHideProgress(playerObj)]]" class="progress"></paper-progress>
+    <paper-progress max="[[stateObj.attributes.media_duration]]" value="[[playbackPosition]]" hidden$="[[computeHideProgress(playerObj)]]" class="progress"></paper-progress>
 
     <div class="controls layout horizontal justified">
-      <paper-icon-button icon="hass:power" on-click="handleTogglePower" invisible\$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
+      <paper-icon-button icon="hass:power" on-click="handleTogglePower" invisible$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
 
       <div>
-        <paper-icon-button icon="hass:skip-previous" invisible\$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
-        <paper-icon-button class="primary" icon="[[computePlaybackControlIcon(playerObj)]]" invisible\$="[[!computePlaybackControlIcon(playerObj)]]" disabled="[[playerObj.isOff]]" on-click="handlePlaybackControl"></paper-icon-button>
-        <paper-icon-button icon="hass:skip-next" invisible\$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
+        <paper-icon-button icon="hass:skip-previous" invisible$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
+        <paper-icon-button class="primary" icon="[[computePlaybackControlIcon(playerObj)]]" invisible$="[[!computePlaybackControlIcon(playerObj)]]" disabled="[[playerObj.isOff]]" on-click="handlePlaybackControl"></paper-icon-button>
+        <paper-icon-button icon="hass:skip-next" invisible$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
       </div>
 
       <paper-icon-button icon="hass:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 159c0ea3ad..99044535c4 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -108,8 +108,8 @@ class HaChartBase extends mixinBehaviors([
       <div class="chartLegend">
         <ul>
           <template is="dom-repeat" items="[[metas]]">
-            <li on-click="_legendClick" data-hidden\$="[[item.hidden]]">
-              <em style\$="background-color:[[item.bgColor]]"></em>
+            <li on-click="_legendClick" data-hidden$="[[item.hidden]]">
+              <em style$="background-color:[[item.bgColor]]"></em>
               [[item.label]]
             </li>
           </template>
@@ -119,12 +119,12 @@ class HaChartBase extends mixinBehaviors([
   </template>
   <div id="chartTarget" style="height:40px; width:100%">
     <canvas id="chartCanvas"></canvas>
-    <div class\$="chartTooltip [[tooltip.yAlign]]" style\$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px">
+    <div class$="chartTooltip [[tooltip.yAlign]]" style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px">
       <div class="title">[[tooltip.title]]</div>
       <div>
         <ul>
           <template is="dom-repeat" items="[[tooltip.lines]]">
-            <li><em style\$="background-color:[[item.bgColor]]"></em>[[item.text]]</li>
+            <li><em style$="background-color:[[item.bgColor]]"></em>[[item.text]]</li>
           </template>
         </ul>
       </div>
diff --git a/src/components/entity/ha-entity-picker.js b/src/components/entity/ha-entity-picker.js
index 54557e8dc3..8b48cbd0b9 100644
--- a/src/components/entity/ha-entity-picker.js
+++ b/src/components/entity/ha-entity-picker.js
@@ -40,7 +40,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
       on-change='_fireChanged'
     >
       <paper-input autofocus="[[autofocus]]" label="[[_computeLabel(label, localize)]]" class="input" value="[[value]]" disabled="[[disabled]]">
-        <paper-icon-button slot="suffix" class="clear-button" icon="hass:close" no-ripple="" hidden\$="[[!value]]">Clear</paper-icon-button>
+        <paper-icon-button slot="suffix" class="clear-button" icon="hass:close" no-ripple="" hidden$="[[!value]]">Clear</paper-icon-button>
         <paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden="[[!_states.length]]">Toggle</paper-icon-button>
       </paper-input>
       <template>
diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index 304099b1bb..5d75d15cc7 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -30,8 +30,8 @@ class HaEntityToggle extends PolymerElement {
     </style>
 
     <template is="dom-if" if="[[stateObj.attributes.assumed_state]]">
-      <paper-icon-button icon="hass:flash-off" on-click="turnOff" state-active\$="[[!isOn]]"></paper-icon-button>
-      <paper-icon-button icon="hass:flash" on-click="turnOn" state-active\$="[[isOn]]"></paper-icon-button>
+      <paper-icon-button icon="hass:flash-off" on-click="turnOff" state-active$="[[!isOn]]"></paper-icon-button>
+      <paper-icon-button icon="hass:flash" on-click="turnOn" state-active$="[[isOn]]"></paper-icon-button>
     </template>
     <template is="dom-if" if="[[!stateObj.attributes.assumed_state]]">
       <paper-toggle-button checked="[[toggleChecked]]" on-change="toggleChanged"></paper-toggle-button>
diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js
index b55a86e3be..99e314b5aa 100644
--- a/src/components/entity/ha-state-label-badge.js
+++ b/src/components/entity/ha-state-label-badge.js
@@ -61,7 +61,7 @@ class HaStateLabelBadge extends
       }
     </style>
 
-    <ha-label-badge class\$="[[computeClassNames(state)]]" value="[[computeValue(localize, state)]]" icon="[[computeIcon(state)]]" image="[[computeImage(state)]]" label="[[computeLabel(localize, state, _timerTimeRemaining)]]" description="[[computeDescription(state)]]"></ha-label-badge>
+    <ha-label-badge class$="[[computeClassNames(state)]]" value="[[computeValue(localize, state)]]" icon="[[computeIcon(state)]]" image="[[computeImage(state)]]" label="[[computeLabel(localize, state, _timerTimeRemaining)]]" description="[[computeDescription(state)]]"></ha-label-badge>
 `;
   }
 
diff --git a/src/components/entity/state-badge.js b/src/components/entity/state-badge.js
index 2b5873ddb3..1efd6c6dd7 100644
--- a/src/components/entity/state-badge.js
+++ b/src/components/entity/state-badge.js
@@ -39,7 +39,7 @@ class StateBadge extends PolymerElement {
     }
     </style>
 
-    <ha-state-icon id="icon" state-obj="[[stateObj]]" data-domain\$="[[computeDomain(stateObj)]]" data-state\$="[[stateObj.state]]"></ha-state-icon>
+    <ha-state-icon id="icon" state-obj="[[stateObj]]" data-domain$="[[computeDomain(stateObj)]]" data-state$="[[stateObj.state]]"></ha-state-icon>
 `;
   }
 
diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js
index 6de7f8d8f2..f0dddbd9b0 100644
--- a/src/components/entity/state-info.js
+++ b/src/components/entity/state-info.js
@@ -58,7 +58,7 @@ class StateInfo extends PolymerElement {
   static get infoTemplate() {
     return html`
     <div class="info">
-      <div class="name" in-dialog\$="[[inDialog]]">[[computeStateName(stateObj)]]</div>
+      <div class="name" in-dialog$="[[inDialog]]">[[computeStateName(stateObj)]]</div>
 
       <template is="dom-if" if="[[inDialog]]">
         <div class="time-ago">
diff --git a/src/components/ha-attributes.js b/src/components/ha-attributes.js
index 9a2c860722..19f73588ab 100644
--- a/src/components/ha-attributes.js
+++ b/src/components/ha-attributes.js
@@ -25,7 +25,7 @@ class HaAttributes extends PolymerElement {
           <div class="value">[[formatAttributeValue(stateObj, attribute)]]</div>
         </div>
       </template>
-      <div class="attribution" hidden\$="[[!computeAttribution(stateObj)]]">[[computeAttribution(stateObj)]]</div>
+      <div class="attribution" hidden$="[[!computeAttribution(stateObj)]]">[[computeAttribution(stateObj)]]</div>
     </div>
 `;
   }
diff --git a/src/components/ha-combo-box.js b/src/components/ha-combo-box.js
index 085dfb5881..58167eb225 100644
--- a/src/components/ha-combo-box.js
+++ b/src/components/ha-combo-box.js
@@ -31,8 +31,8 @@ class HaComboBox extends EventsMixin(PolymerElement) {
       on-change='_fireChanged'
     >
       <paper-input autofocus="[[autofocus]]" label="[[label]]" class="input" value="[[value]]">
-        <paper-icon-button slot="suffix" class="clear-button" icon="hass:close" hidden\$="[[!value]]">Clear</paper-icon-button>
-        <paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden\$="[[!items.length]]">Toggle</paper-icon-button>
+        <paper-icon-button slot="suffix" class="clear-button" icon="hass:close" hidden$="[[!value]]">Clear</paper-icon-button>
+        <paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden$="[[!items.length]]">Toggle</paper-icon-button>
       </paper-input>
       <template>
         <style>
diff --git a/src/components/ha-cover-controls.js b/src/components/ha-cover-controls.js
index 73bfe1547a..dabaed7faa 100644
--- a/src/components/ha-cover-controls.js
+++ b/src/components/ha-cover-controls.js
@@ -17,9 +17,9 @@ class HaCoverControls extends PolymerElement {
     </style>
 
     <div class="state">
-      <paper-icon-button icon="hass:arrow-up" on-click="onOpenTap" invisible\$="[[!entityObj.supportsOpen]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
-      <paper-icon-button icon="hass:stop" on-click="onStopTap" invisible\$="[[!entityObj.supportsStop]]"></paper-icon-button>
-      <paper-icon-button icon="hass:arrow-down" on-click="onCloseTap" invisible\$="[[!entityObj.supportsClose]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
+      <paper-icon-button icon="hass:arrow-up" on-click="onOpenTap" invisible$="[[!entityObj.supportsOpen]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
+      <paper-icon-button icon="hass:stop" on-click="onStopTap" invisible$="[[!entityObj.supportsStop]]"></paper-icon-button>
+      <paper-icon-button icon="hass:arrow-down" on-click="onCloseTap" invisible$="[[!entityObj.supportsClose]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
     </div>
 `;
   }
diff --git a/src/components/ha-cover-tilt-controls.js b/src/components/ha-cover-tilt-controls.js
index 3c4625b90f..db99932e2f 100644
--- a/src/components/ha-cover-tilt-controls.js
+++ b/src/components/ha-cover-tilt-controls.js
@@ -17,9 +17,9 @@ class HaCoverTiltControls extends PolymerElement {
         visibility: hidden !important;
       }
     </style>
-    <paper-icon-button icon="hass:arrow-top-right" on-click="onOpenTiltTap" title="Open tilt" invisible\$="[[!entityObj.supportsOpenTilt]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
-    <paper-icon-button icon="hass:stop" on-click="onStopTiltTap" invisible\$="[[!entityObj.supportsStopTilt]]" title="Stop tilt"></paper-icon-button>
-    <paper-icon-button icon="hass:arrow-bottom-left" on-click="onCloseTiltTap" title="Close tilt" invisible\$="[[!entityObj.supportsCloseTilt]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
+    <paper-icon-button icon="hass:arrow-top-right" on-click="onOpenTiltTap" title="Open tilt" invisible$="[[!entityObj.supportsOpenTilt]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
+    <paper-icon-button icon="hass:stop" on-click="onStopTiltTap" invisible$="[[!entityObj.supportsStopTilt]]" title="Stop tilt"></paper-icon-button>
+    <paper-icon-button icon="hass:arrow-bottom-left" on-click="onCloseTiltTap" title="Close tilt" invisible$="[[!entityObj.supportsCloseTilt]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
 `;
   }
 
diff --git a/src/components/ha-form.js b/src/components/ha-form.js
index 7bc0c8e671..fb3c6e6218 100644
--- a/src/components/ha-form.js
+++ b/src/components/ha-form.js
@@ -63,7 +63,7 @@ class HaForm extends EventsMixin(PolymerElement) {
         <paper-dropdown-menu label="[[computeLabel(schema)]]">
           <paper-listbox slot="dropdown-content" attr-for-selected="item-name" selected="{{data}}">
             <template is="dom-repeat" items="[[schema.options]]">
-              <paper-item item-name\$="[[item]]">[[item]]</paper-item>
+              <paper-item item-name$="[[item]]">[[item]]</paper-item>
             </template>
           </paper-listbox>
         </paper-dropdown-menu>
diff --git a/src/components/ha-label-badge.js b/src/components/ha-label-badge.js
index 423d08cb3b..c292f9dfce 100644
--- a/src/components/ha-label-badge.js
+++ b/src/components/ha-label-badge.js
@@ -82,15 +82,15 @@ class HaLabelBadge extends PolymerElement {
 
     <div class="badge-container">
       <div class="label-badge" id="badge">
-        <div class\$="[[computeValueClasses(value)]]">
-          <iron-icon icon="[[icon]]" hidden\$="[[computeHideIcon(icon, value, image)]]"></iron-icon>
-          <span hidden\$="[[computeHideValue(value, image)]]">[[value]]</span>
+        <div class$="[[computeValueClasses(value)]]">
+          <iron-icon icon="[[icon]]" hidden$="[[computeHideIcon(icon, value, image)]]"></iron-icon>
+          <span hidden$="[[computeHideValue(value, image)]]">[[value]]</span>
         </div>
-        <div hidden\$="[[computeHideLabel(label)]]" class\$="[[computeLabelClasses(label)]]">
+        <div hidden$="[[computeHideLabel(label)]]" class$="[[computeLabelClasses(label)]]">
           <span>[[label]]</span>
         </div>
       </div>
-      <div class="title" hidden\$="[[!description]]">[[description]]</div>
+      <div class="title" hidden$="[[!description]]">[[description]]</div>
     </div>
 `;
   }
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index 49d0b7030e..3bb6300aae 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -34,7 +34,7 @@ class HaLabeledSlider extends PolymerElement {
       <slot name="extra"></slot>
     </div>
     <div class="slider-container">
-      <iron-icon icon="[[icon]]" hidden\$="[[!icon]]"></iron-icon>
+      <iron-icon icon="[[icon]]" hidden$="[[!icon]]"></iron-icon>
       <ha-paper-slider
         min="[[min]]" max="[[max]]" step="[[step]]"
         pin="[[pin]]" disabled="[[disabled]]" disabled="[[disabled]]"
diff --git a/src/components/ha-menu-button.js b/src/components/ha-menu-button.js
index 509b616575..fafea677e8 100644
--- a/src/components/ha-menu-button.js
+++ b/src/components/ha-menu-button.js
@@ -15,7 +15,7 @@ class HaMenuButton extends EventsMixin(PolymerElement) {
         visibility: hidden;
       }
     </style>
-    <paper-icon-button icon="hass:menu" class\$="[[computeMenuButtonClass(narrow, showMenu)]]" on-click="toggleMenu"></paper-icon-button>
+    <paper-icon-button icon="hass:menu" class$="[[computeMenuButtonClass(narrow, showMenu)]]" on-click="toggleMenu"></paper-icon-button>
 `;
   }
 
diff --git a/src/components/ha-push-notifications-toggle.js b/src/components/ha-push-notifications-toggle.js
index 13f260069e..fe76ec6dec 100644
--- a/src/components/ha-push-notifications-toggle.js
+++ b/src/components/ha-push-notifications-toggle.js
@@ -10,7 +10,7 @@ import EventsMixin from '../mixins/events-mixin.js';
 class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-    <paper-toggle-button hidden\$="[[!pushSupported]]" disabled="[[loading]]" checked="{{pushChecked}}"></paper-toggle-button>
+    <paper-toggle-button hidden$="[[!pushSupported]]" disabled="[[loading]]" checked="{{pushChecked}}"></paper-toggle-button>
 `;
   }
 
diff --git a/src/components/ha-sidebar.js b/src/components/ha-sidebar.js
index a68bb96261..6eaca683a2 100644
--- a/src/components/ha-sidebar.js
+++ b/src/components/ha-sidebar.js
@@ -102,7 +102,7 @@ class HaSidebar extends
 
     <app-toolbar>
       <div main-title="">Home Assistant</div>
-      <paper-icon-button icon="hass:chevron-left" hidden\$="[[narrow]]" on-click="toggleMenu"></paper-icon-button>
+      <paper-icon-button icon="hass:chevron-left" hidden$="[[narrow]]" on-click="toggleMenu"></paper-icon-button>
     </app-toolbar>
 
     <paper-listbox attr-for-selected="data-panel" selected="[[hass.panelUrl]]">
diff --git a/src/components/ha-start-voice-button.js b/src/components/ha-start-voice-button.js
index 41f86a1801..bbb138c34f 100644
--- a/src/components/ha-start-voice-button.js
+++ b/src/components/ha-start-voice-button.js
@@ -12,7 +12,7 @@ import isComponentLoaded from '../common/config/is_component_loaded.js';
 class HaStartVoiceButton extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-    <paper-icon-button icon="hass:microphone" hidden\$="[[!canListen]]" on-click="handleListenClick"></paper-icon-button>
+    <paper-icon-button icon="hass:microphone" hidden$="[[!canListen]]" on-click="handleListenClick"></paper-icon-button>
 `;
   }
 
diff --git a/src/components/paper-time-input.js b/src/components/paper-time-input.js
index bcc22496ae..ca9a78297e 100644
--- a/src/components/paper-time-input.js
+++ b/src/components/paper-time-input.js
@@ -97,7 +97,7 @@ class PaperTimeInput extends PolymerElement {
         }
       </style>
 
-      <label hidden\$="[[hideLabel]]">[[label]]</label>
+      <label hidden$="[[hideLabel]]">[[label]]</label>
       <div class="time-input-wrap">
 
         <!-- Hour Input -->
@@ -112,7 +112,7 @@ class PaperTimeInput extends PolymerElement {
         </paper-input>
 
         <!-- Dropdown Menu -->
-        <paper-dropdown-menu id="dropdown" required="" hidden\$="[[_equal(format, 24)]]" no-label-float="" disabled="[[disabled]]">
+        <paper-dropdown-menu id="dropdown" required="" hidden$="[[_equal(format, 24)]]" no-label-float="" disabled="[[disabled]]">
 
           <paper-listbox attr-for-selected="name" selected="{{amPm}}" slot="dropdown-content">
             <paper-item name="AM">AM</paper-item>
diff --git a/src/dialogs/ha-voice-command-dialog.js b/src/dialogs/ha-voice-command-dialog.js
index d6b6558a40..39b9f04cec 100644
--- a/src/dialogs/ha-voice-command-dialog.js
+++ b/src/dialogs/ha-voice-command-dialog.js
@@ -113,7 +113,7 @@ class HaVoiceCommandDialog extends DialogMixin(PolymerElement) {
     <div class="content">
       <div class="messages" id="messages">
         <template is="dom-repeat" items="[[_conversation]]" as="message">
-          <div class\$="[[_computeMessageClasses(message)]]">[[message.text]]</div>
+          <div class$="[[_computeMessageClasses(message)]]">[[message.text]]</div>
         </template>
       </div>
       <template is="dom-if" if="[[results]]">
@@ -125,7 +125,7 @@ class HaVoiceCommandDialog extends DialogMixin(PolymerElement) {
           </div>
         </div>
       </template>
-      <div class="icon" hidden\$="[[results]]">
+      <div class="icon" hidden$="[[results]]">
         <paper-icon-button icon="hass:text-to-speech" on-click="startListening"></paper-icon-button>
       </div>
     </div>
diff --git a/src/dialogs/more-info/controls/more-info-climate.js b/src/dialogs/more-info/controls/more-info-climate.js
index 4302b1b954..aeb129b723 100644
--- a/src/dialogs/more-info/controls/more-info-climate.js
+++ b/src/dialogs/more-info/controls/more-info-climate.js
@@ -115,7 +115,7 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
       }
     </style>
 
-    <div class\$="[[computeClassNames(stateObj)]]">
+    <div class$="[[computeClassNames(stateObj)]]">
 
       <template is="dom-if" if="[[supportsOn(stateObj)]]">
         <div class="container-on">
@@ -128,8 +128,8 @@ class MoreInfoClimate extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </template>
 
       <div class="container-temperature">
-        <div class\$="[[stateObj.attributes.operation_mode]]">
-          <div hidden\$="[[!supportsTemperatureControls(stateObj)]]">[[localize('ui.card.climate.target_temperature')]]</div>
+        <div class$="[[stateObj.attributes.operation_mode]]">
+          <div hidden$="[[!supportsTemperatureControls(stateObj)]]">[[localize('ui.card.climate.target_temperature')]]</div>
           <template is="dom-if" if="[[supportsTemperature(stateObj)]]">
             <ha-climate-control value="[[stateObj.attributes.temperature]]" units="[[stateObj.attributes.unit_of_measurement]]" step="[[computeTemperatureStepSize(stateObj)]]" min="[[stateObj.attributes.min_temp]]" max="[[stateObj.attributes.max_temp]]" on-change="targetTemperatureChanged">
             </ha-climate-control>
diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js
index be579abb88..2201693063 100644
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -53,7 +53,7 @@ class MoreInfoConfigurator extends PolymerElement {
       <template is="dom-if" if="[[isConfigurable]]">
         <ha-markdown content="[[stateObj.attributes.description]]"></ha-markdown>
 
-        <p class="error" hidden\$="[[!stateObj.attributes.errors]]">
+        <p class="error" hidden$="[[!stateObj.attributes.errors]]">
           [[stateObj.attributes.errors]]
         </p>
 
@@ -61,7 +61,7 @@ class MoreInfoConfigurator extends PolymerElement {
           <paper-input label="[[item.name]]" name="[[item.id]]" type="[[item.type]]" on-change="fieldChanged"></paper-input>
         </template>
 
-        <p class="submit" hidden\$="[[!stateObj.attributes.submit_caption]]">
+        <p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
           <paper-button raised="" disabled="[[isConfiguring]]" on-click="submitClicked">
             <paper-spinner active="[[isConfiguring]]" hidden="[[!isConfiguring]]" alt="Configuring"></paper-spinner>
             [[stateObj.attributes.submit_caption]]
diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js
index c9e96977f2..32e6400154 100644
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@@ -36,7 +36,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
       visibility: hidden !important;
     }
   </style>
-  <div class\$="[[computeClassNames(stateObj)]]">
+  <div class$="[[computeClassNames(stateObj)]]">
 
     <div class="current_position">
       <ha-labeled-slider
@@ -55,7 +55,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
         on-change="coverTiltPositionSliderChanged">
 
         <ha-cover-tilt-controls
-          slot="extra" hidden\$="[[entityObj.isTiltOnly]]"
+          slot="extra" hidden$="[[entityObj.isTiltOnly]]"
           hass="[[hass]]" state-obj="[[stateObj]]"
         ></ha-cover-tilt-controls>
 
diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js
index 00c3f4e258..239952643d 100644
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -43,7 +43,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
       }
     </style>
 
-    <div class\$="[[computeClassNames(stateObj)]]">
+    <div class$="[[computeClassNames(stateObj)]]">
 
       <div class="container-speed_list">
         <paper-dropdown-menu label-float="" dynamic-align="" label="[[localize('ui.card.fan.speed')]]">
diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.js b/src/dialogs/more-info/controls/more-info-input_datetime.js
index a13ffa14b6..179d543e2d 100644
--- a/src/dialogs/more-info/controls/more-info-input_datetime.js
+++ b/src/dialogs/more-info/controls/more-info-input_datetime.js
@@ -13,7 +13,7 @@ import attributeClassNames from '../../../common/entity/attribute_class_names.js
 class DatetimeInput extends PolymerElement {
   static get template() {
     return html`
-    <div class\$="[[computeClassNames(stateObj)]]">
+    <div class$="[[computeClassNames(stateObj)]]">
       <template is="dom-if" if="[[doesHaveDate(stateObj)]]" restamp="">
         <div>
           <vaadin-date-picker id="dateInput" on-value-changed="dateTimeChanged" label="Date" value="{{selectedDate}}"></vaadin-date-picker>
diff --git a/src/dialogs/more-info/controls/more-info-light.js b/src/dialogs/more-info/controls/more-info-light.js
index f31edc7c2c..f453319709 100644
--- a/src/dialogs/more-info/controls/more-info-light.js
+++ b/src/dialogs/more-info/controls/more-info-light.js
@@ -80,7 +80,7 @@ class MoreInfoLight extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   </style>
 
-  <div class\$="[[computeClassNames(stateObj)]]">
+  <div class$="[[computeClassNames(stateObj)]]">
 
     <div class="control brightness">
       <ha-labeled-slider caption="[[localize('ui.card.light.brightness')]]" icon="hass:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged"></ha-labeled-slider>
diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 68aba88d2f..6ac017e5e5 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -62,32 +62,32 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     }
   </style>
 
-  <div class\$="[[computeClassNames(stateObj)]]">
+  <div class$="[[computeClassNames(stateObj)]]">
     <div class="layout horizontal">
       <div class="flex">
-        <paper-icon-button icon="hass:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
+        <paper-icon-button icon="hass:power" highlight$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
       </div>
       <div>
         <template is="dom-if" if="[[computeShowPlaybackControls(playerObj)]]">
-          <paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
-          <paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden\$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
-          <paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
+          <paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
+          <paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
+          <paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
         </template>
       </div>
     </div>
     <!-- VOLUME -->
-    <div class="volume_buttons center horizontal layout" hidden\$="[[computeHideVolumeButtons(playerObj)]]">
+    <div class="volume_buttons center horizontal layout" hidden$="[[computeHideVolumeButtons(playerObj)]]">
       <paper-icon-button on-click="handleVolumeTap" icon="hass:volume-off"></paper-icon-button>
-      <paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
-      <paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
+      <paper-icon-button id="volumeDown" disabled$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
+      <paper-icon-button id="volumeUp" disabled$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
     </div>
-    <div class="volume center horizontal layout" hidden\$="[[!playerObj.supportsVolumeSet]]">
-      <paper-icon-button on-click="handleVolumeTap" hidden\$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
-      <ha-paper-slider disabled\$="[[playerObj.isMuted]]" min="0" max="100" value="[[playerObj.volumeSliderValue]]" on-change="volumeSliderChanged" class="flex" ignore-bar-touch="">
+    <div class="volume center horizontal layout" hidden$="[[!playerObj.supportsVolumeSet]]">
+      <paper-icon-button on-click="handleVolumeTap" hidden$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
+      <ha-paper-slider disabled$="[[playerObj.isMuted]]" min="0" max="100" value="[[playerObj.volumeSliderValue]]" on-change="volumeSliderChanged" class="flex" ignore-bar-touch="">
       </ha-paper-slider>
     </div>
     <!-- SOURCE PICKER -->
-    <div class="controls layout horizontal justified" hidden\$="[[computeHideSelectSource(playerObj)]]">
+    <div class="controls layout horizontal justified" hidden$="[[computeHideSelectSource(playerObj)]]">
       <iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
       <paper-dropdown-menu class="flex source-input" dynamic-align="" label-float="" label="Source">
         <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
@@ -111,7 +111,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </div>
     </template>
     <!-- TTS -->
-    <div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
+    <div hidden$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
       <paper-input id="ttsInput" label="[[localize('ui.card.media_player.text_to_speak')]]" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
       <paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
     </div>
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.js b/src/dialogs/more-info/controls/more-info-vacuum.js
index da84bfafbc..9842663354 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.js
+++ b/src/dialogs/more-info/controls/more-info-vacuum.js
@@ -30,36 +30,36 @@ class MoreInfoVacuum extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <div hidden\$="[[!supportsStatus(stateObj)]]">
+      <div hidden$="[[!supportsStatus(stateObj)]]">
         <span class="status-subtitle">Status: </span><span><strong>[[stateObj.attributes.status]]</strong></span>
       </div>
-      <div hidden\$="[[!supportsBattery(stateObj)]]">
+      <div hidden$="[[!supportsBattery(stateObj)]]">
         <span><iron-icon icon="[[stateObj.attributes.battery_icon]]"></iron-icon> [[stateObj.attributes.battery_level]] %</span>
       </div>
     </div>
-    <div hidden\$="[[!supportsCommandBar(stateObj)]]">
+    <div hidden$="[[!supportsCommandBar(stateObj)]]">
       <p></p>
       <div class="status-subtitle">Vacuum cleaner commands:</div>
       <div class="horizontal justified layout">
-        <div hidden\$="[[!supportsPause(stateObj)]]">
+        <div hidden$="[[!supportsPause(stateObj)]]">
           <paper-icon-button icon="hass:play-pause" on-click="onPlayPause" title="Start/Pause"></paper-icon-button>
         </div>
-        <div hidden\$="[[!supportsStop(stateObj)]]">
+        <div hidden$="[[!supportsStop(stateObj)]]">
           <paper-icon-button icon="hass:stop" on-click="onStop" title="Stop"></paper-icon-button>
         </div>
-        <div hidden\$="[[!supportsCleanSpot(stateObj)]]">
+        <div hidden$="[[!supportsCleanSpot(stateObj)]]">
         <paper-icon-button icon="hass:broom" on-click="onCleanSpot" title="Clean spot"></paper-icon-button>
         </div>
-        <div hidden\$="[[!supportsLocate(stateObj)]]">
+        <div hidden$="[[!supportsLocate(stateObj)]]">
         <paper-icon-button icon="hass:map-marker" on-click="onLocate" title="Locate"></paper-icon-button>
         </div>
-        <div hidden\$="[[!supportsReturnHome(stateObj)]]">
+        <div hidden$="[[!supportsReturnHome(stateObj)]]">
         <paper-icon-button icon="hass:home-map-marker" on-click="onReturnHome" title="Return home"></paper-icon-button>
         </div>
       </div>
     </div>
 
-    <div hidden\$="[[!supportsFanSpeed(stateObj)]]">
+    <div hidden$="[[!supportsFanSpeed(stateObj)]]">
       <div class="horizontal justified layout">
         <paper-dropdown-menu label-float="" dynamic-align="" label="Fan speed">
           <paper-listbox slot="dropdown-content" selected="{{fanSpeedIndex}}">
diff --git a/src/layouts/login-form.js b/src/layouts/login-form.js
index 4f1d7cb926..299bfb9427 100644
--- a/src/layouts/login-form.js
+++ b/src/layouts/login-form.js
@@ -53,14 +53,14 @@ class LoginForm extends LocalizeMixin(PolymerElement) {
       <img src="/static/icons/favicon-192x192.png" height="192">
       <a href="#" id="hideKeyboardOnFocus"></a>
       <div class="interact">
-        <div id="loginform" hidden\$="[[showSpinner]]">
+        <div id="loginform" hidden$="[[showSpinner]]">
           <paper-input id="passwordInput" label="[[localize('ui.login-form.password')]]" type="password" autofocus="" invalid="[[errorMessage]]" error-message="[[errorMessage]]" value="{{password}}"></paper-input>
           <div class="layout horizontal center">
             <paper-checkbox for="" id="rememberLogin">[[localize('ui.login-form.remember')]]</paper-checkbox>
             <paper-button on-click="validatePassword">[[localize('ui.login-form.log_in')]]</paper-button>
           </div>
         </div>
-        <div id="validatebox" hidden\$="[[!showSpinner]]">
+        <div id="validatebox" hidden$="[[!showSpinner]]">
           <paper-spinner active="true"></paper-spinner><br>
           <div class="validatemessage">[[computeLoadingMsg(isValidating)]]</div>
         </div>
diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index bf12ff0072..e33accb1b9 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -61,7 +61,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
         <ha-start-voice-button hass="[[hass]]"></ha-start-voice-button>
       </app-toolbar>
 
-      <div sticky="" hidden\$="[[areTabsHidden(views, showTabs)]]">
+      <div sticky="" hidden$="[[areTabsHidden(views, showTabs)]]">
         <paper-tabs scrollable="" selected="[[currentView]]" attr-for-selected="data-entity" on-iron-activate="handleViewSelected">
           <paper-tab data-entity="" on-click="scrollToTop">
             <template is="dom-if" if="[[!defaultView]]">
@@ -69,7 +69,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
             </template>
             <template is="dom-if" if="[[defaultView]]">
               <template is="dom-if" if="[[defaultView.attributes.icon]]">
-                <iron-icon title\$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
+                <iron-icon title$="[[_computeStateName(defaultView)]]" icon="[[defaultView.attributes.icon]]"></iron-icon>
               </template>
               <template is="dom-if" if="[[!defaultView.attributes.icon]]">
                 [[_computeStateName(defaultView)]]
@@ -77,9 +77,9 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
             </template>
           </paper-tab>
           <template is="dom-repeat" items="[[views]]">
-            <paper-tab data-entity\$="[[item.entity_id]]" on-click="scrollToTop">
+            <paper-tab data-entity$="[[item.entity_id]]" on-click="scrollToTop">
               <template is="dom-if" if="[[item.attributes.icon]]">
-                <iron-icon title\$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
+                <iron-icon title$="[[_computeStateName(item)]]" icon="[[item.attributes.icon]]"></iron-icon>
               </template>
               <template is="dom-if" if="[[!item.attributes.icon]]">
                 [[_computeStateName(item)]]
@@ -94,7 +94,7 @@ class PartialCards extends EventsMixin(NavigateMixin(PolymerElement)) {
       <ha-cards data-view="" states="[[viewStates]]" columns="[[_columns]]" hass="[[hass]]" panel-visible="[[panelVisible]]" ordered-group-entities="[[orderedGroupEntities]]"></ha-cards>
 
       <template is="dom-repeat" items="[[views]]">
-        <ha-cards data-view\$="[[item.entity_id]]" states="[[viewStates]]" columns="[[_columns]]" hass="[[hass]]" panel-visible="[[panelVisible]]" ordered-group-entities="[[orderedGroupEntities]]"></ha-cards>
+        <ha-cards data-view$="[[item.entity_id]]" states="[[viewStates]]" columns="[[_columns]]" hass="[[hass]]" panel-visible="[[panelVisible]]" ordered-group-entities="[[orderedGroupEntities]]"></ha-cards>
       </template>
 
     </iron-pages>
diff --git a/src/layouts/partial-panel-resolver.js b/src/layouts/partial-panel-resolver.js
index 4f86569d88..3fd673eef3 100644
--- a/src/layouts/partial-panel-resolver.js
+++ b/src/layouts/partial-panel-resolver.js
@@ -105,7 +105,7 @@ class PartialPanelResolver extends NavigateMixin(PolymerElement) {
       <hass-loading-screen narrow="[[narrow]]" show-menu="[[showMenu]]"></hass-loading-screen>
     </template>
 
-    <span id="panel" hidden\$="[[!resolved]]"></span>
+    <span id="panel" hidden$="[[!resolved]]"></span>
 `;
   }
 
diff --git a/src/panels/config/automation/ha-automation-editor.js b/src/panels/config/automation/ha-automation-editor.js
index 4e4b28bf06..6da9a58e4d 100644
--- a/src/panels/config/automation/ha-automation-editor.js
+++ b/src/panels/config/automation/ha-automation-editor.js
@@ -97,7 +97,7 @@ class HaAutomationEditor extends
         </template>
         <div id="root"></div>
       </div>
-      <paper-fab slot="fab" is-wide\$="[[isWide]]" dirty\$="[[dirty]]" icon="hass:content-save" title="[[localize('ui.panel.config.automation.editor.save')]]" on-click="saveAutomation"></paper-fab>
+      <paper-fab slot="fab" is-wide$="[[isWide]]" dirty$="[[dirty]]" icon="hass:content-save" title="[[localize('ui.panel.config.automation.editor.save')]]" on-click="saveAutomation"></paper-fab>
     </ha-app-layout>
 `;
   }
diff --git a/src/panels/config/automation/ha-automation-picker.js b/src/panels/config/automation/ha-automation-picker.js
index 0218168e16..59511ad2a3 100644
--- a/src/panels/config/automation/ha-automation-picker.js
+++ b/src/panels/config/automation/ha-automation-picker.js
@@ -86,7 +86,7 @@ class HaAutomationPicker extends
         </paper-card>
       </ha-config-section>
 
-      <paper-fab slot="fab" is-wide\$="[[isWide]]" icon="hass:plus" title="[[localize('ui.panel.config.automation.picker.add_automation')]]" on-click="addAutomation"></paper-fab>
+      <paper-fab slot="fab" is-wide$="[[isWide]]" icon="hass:plus" title="[[localize('ui.panel.config.automation.picker.add_automation')]]" on-click="addAutomation"></paper-fab>
     </ha-app-layout>
 `;
   }
diff --git a/src/panels/config/cloud/ha-config-cloud-forgot-password.js b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
index c0a20ae93e..c7339b7f91 100644
--- a/src/panels/config/cloud/ha-config-cloud-forgot-password.js
+++ b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
@@ -52,7 +52,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
             <p>
               Enter your email address and we will send you a link to reset your password.
             </p>
-            <div class="error" hidden\$="[[!_error]]">[[_error]]</div>
+            <div class="error" hidden$="[[!_error]]">[[_error]]</div>
             <paper-input autofocus="" id="email" label="E-mail" value="{{email}}" type="email" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
           </div>
           <div class="card-actions">
diff --git a/src/panels/config/cloud/ha-config-cloud-login.js b/src/panels/config/cloud/ha-config-cloud-login.js
index 6165a2bcf8..1046f2517b 100644
--- a/src/panels/config/cloud/ha-config-cloud-login.js
+++ b/src/panels/config/cloud/ha-config-cloud-login.js
@@ -74,7 +74,7 @@ class HaConfigCloudLogin extends
             <p><a href="https://www.home-assistant.io/components/cloud/" target="_blank">Learn more</a></p>
           </span>
 
-          <paper-card hidden\$="[[!flashMessage]]">
+          <paper-card hidden$="[[!flashMessage]]">
             <div class="card-content flash-msg">
               [[flashMessage]]
               <paper-icon-button icon="hass:close" on-click="_dismissFlash">Dismiss</paper-icon-button>
@@ -85,7 +85,7 @@ class HaConfigCloudLogin extends
           <paper-card>
             <div class="card-content">
               <h1>Sign In</h1>
-              <div class="error" hidden\$="[[!_error]]">[[_error]]</div>
+              <div class="error" hidden$="[[!_error]]">[[_error]]</div>
               <paper-input label="Email" id="email" type="email" value="{{email}}" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
               <paper-input id="password" label="Password" value="{{_password}}" type="password" on-keydown="_keyDown" error-message="Passwords are at least 8 characters"></paper-input>
             </div>
diff --git a/src/panels/config/cloud/ha-config-cloud-register.js b/src/panels/config/cloud/ha-config-cloud-register.js
index 9a5b34c413..22f4c67a0d 100644
--- a/src/panels/config/cloud/ha-config-cloud-register.js
+++ b/src/panels/config/cloud/ha-config-cloud-register.js
@@ -64,7 +64,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
             <div class="card-content">
               <div class="header">
                 <h1>Register</h1>
-                <div class="error" hidden\$="[[!_error]]">[[_error]]</div>
+                <div class="error" hidden$="[[!_error]]">[[_error]]</div>
               </div>
               <paper-input autofocus="" id="email" label="Email address" type="email" value="{{email}}" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
               <paper-input id="password" label="Password" value="{{_password}}" type="password" on-keydown="_keyDown" error-message="Your password needs to be at least 8 characters"></paper-input>
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js
index 2729bb1537..8f090eba0b 100644
--- a/src/panels/config/core/ha-config-core.js
+++ b/src/panels/config/core/ha-config-core.js
@@ -45,7 +45,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) {
         </app-toolbar>
       </app-header>
 
-      <div class\$="[[computeClasses(isWide)]]">
+      <div class$="[[computeClasses(isWide)]]">
         <ha-config-section-core is-wide="[[isWide]]" hass="[[hass]]"></ha-config-section-core>
 
         <template is="dom-if" if="[[pushSupported]]">
diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js
index 7498ca90c3..9da5c3dc96 100644
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/src/panels/config/core/ha-config-section-core.js
@@ -93,11 +93,11 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         <div class="card-actions">
           <ha-call-service-button hass="[[hass]]" domain="homeassistant" service="reload_core_config">[[localize('ui.panel.config.core.section.core.reloading.core')]]
           </ha-call-service-button>
-          <ha-call-service-button hass="[[hass]]" domain="group" service="reload" hidden\$="[[!groupLoaded(hass)]]">[[localize('ui.panel.config.core.section.core.reloading.group')]]
+          <ha-call-service-button hass="[[hass]]" domain="group" service="reload" hidden$="[[!groupLoaded(hass)]]">[[localize('ui.panel.config.core.section.core.reloading.group')]]
           </ha-call-service-button>
-          <ha-call-service-button hass="[[hass]]" domain="automation" service="reload" hidden\$="[[!automationLoaded(hass)]]">[[localize('ui.panel.config.core.section.core.reloading.automation')]]
+          <ha-call-service-button hass="[[hass]]" domain="automation" service="reload" hidden$="[[!automationLoaded(hass)]]">[[localize('ui.panel.config.core.section.core.reloading.automation')]]
           </ha-call-service-button>
-          <ha-call-service-button hass="[[hass]]" domain="script" service="reload" hidden\$="[[!scriptLoaded(hass)]]">[[localize('ui.panel.config.core.section.core.reloading.script')]]
+          <ha-call-service-button hass="[[hass]]" domain="script" service="reload" hidden$="[[!scriptLoaded(hass)]]">[[localize('ui.panel.config.core.section.core.reloading.script')]]
           </ha-call-service-button>
         </div>
       </paper-card>
diff --git a/src/panels/config/core/ha-config-section-translation.js b/src/panels/config/core/ha-config-section-translation.js
index 7d59853c5a..6128fc0cb0 100644
--- a/src/panels/config/core/ha-config-section-translation.js
+++ b/src/panels/config/core/ha-config-section-translation.js
@@ -29,7 +29,7 @@ class HaConfigSectionTranslation extends
           <paper-dropdown-menu label="[[localize('ui.panel.config.core.section.translation.language')]]" dynamic-align="">
             <paper-listbox slot="dropdown-content" attr-for-selected="language-tag" selected="{{languageSelection}}">
               <template is="dom-repeat" items="[[languages]]">
-                <paper-item language-tag\$="[[item.tag]]">[[item.nativeName]]</paper-item>
+                <paper-item language-tag$="[[item.tag]]">[[item.nativeName]]</paper-item>
               </template>
             </paper-listbox>
           &gt;</paper-dropdown-menu>
diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js
index 5824862d92..d4c5cc875b 100644
--- a/src/panels/config/customize/ha-config-customize.js
+++ b/src/panels/config/customize/ha-config-customize.js
@@ -33,7 +33,7 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
         </app-toolbar>
       </app-header>
 
-      <div class\$="[[computeClasses(isWide)]]">
+      <div class$="[[computeClasses(isWide)]]">
         <ha-config-section is-wide="[[isWide]]">
           <span slot="header">Customization</span>
           <span slot="introduction">
diff --git a/src/panels/config/customize/ha-form-customize-attributes.js b/src/panels/config/customize/ha-form-customize-attributes.js
index 120383a44c..a727fcc9a7 100644
--- a/src/panels/config/customize/ha-form-customize-attributes.js
+++ b/src/panels/config/customize/ha-form-customize-attributes.js
@@ -13,7 +13,7 @@ class HaFormCustomizeAttributes extends MutableData(PolymerElement) {
       }
     </style>
     <template is="dom-repeat" items="{{attributes}}" mutable-data="">
-      <ha-customize-attribute item="{{item}}" hidden\$="[[item.closed]]">
+      <ha-customize-attribute item="{{item}}" hidden$="[[item.closed]]">
       </ha-customize-attribute>
     </template>
 `;
diff --git a/src/panels/config/ha-config-section.js b/src/panels/config/ha-config-section.js
index 3d1207c43a..722541d045 100644
--- a/src/panels/config/ha-config-section.js
+++ b/src/panels/config/ha-config-section.js
@@ -55,9 +55,9 @@ class HaConfigSection extends PolymerElement {
         max-width: 500px;
       }
     </style>
-    <div class\$="[[computeContentClasses(isWide)]]">
+    <div class$="[[computeContentClasses(isWide)]]">
       <div class="header"><slot name="header"></slot></div>
-      <div class\$="[[computeClasses(isWide)]]">
+      <div class$="[[computeClasses(isWide)]]">
         <div class="intro">
           <slot name="introduction"></slot>
         </div>
diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js
index 292743da66..e920ea3440 100644
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@@ -63,7 +63,7 @@ class HaEntityConfig extends PolymerElement {
             </div>
           </template>
 
-          <div hidden\$="[[!computeShowForm(formState)]]" id="form"></div>
+          <div hidden$="[[!computeShowForm(formState)]]" id="form"></div>
         </div>
       </div>
       <div class="card-actions">
diff --git a/src/panels/config/script/ha-script-editor.js b/src/panels/config/script/ha-script-editor.js
index 0cb4febe4d..642be4f4cc 100644
--- a/src/panels/config/script/ha-script-editor.js
+++ b/src/panels/config/script/ha-script-editor.js
@@ -96,7 +96,7 @@ class HaScriptEditor extends
         </template>
         <div id="root"></div>
       </div>
-      <paper-fab slot="fab" is-wide\$="[[isWide]]" dirty\$="[[dirty]]" icon="hass:content-save" title="Save" on-click="saveScript"></paper-fab>
+      <paper-fab slot="fab" is-wide$="[[isWide]]" dirty$="[[dirty]]" icon="hass:content-save" title="Save" on-click="saveScript"></paper-fab>
     </ha-app-layout>
 `;
   }
diff --git a/src/panels/config/script/ha-script-picker.js b/src/panels/config/script/ha-script-picker.js
index 6f82647e83..3f6272a4b9 100644
--- a/src/panels/config/script/ha-script-picker.js
+++ b/src/panels/config/script/ha-script-picker.js
@@ -82,7 +82,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         </paper-card>
       </ha-config-section>
 
-      <paper-fab slot="fab" is-wide\$="[[isWide]]" icon="hass:plus" title="Add Script" on-click="addScript"></paper-fab>
+      <paper-fab slot="fab" is-wide$="[[isWide]]" icon="hass:plus" title="Add Script" on-click="addScript"></paper-fab>
     </ha-app-layout>
 `;
   }
diff --git a/src/panels/config/zwave/ha-config-zwave.js b/src/panels/config/zwave/ha-config-zwave.js
index 4fc7126e98..cf4a30a1c9 100644
--- a/src/panels/config/zwave/ha-config-zwave.js
+++ b/src/panels/config/zwave/ha-config-zwave.js
@@ -120,28 +120,28 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
           <template is="dom-if" if="[[computeIsNodeSelected(selectedNode)]]">
           <div class="card-actions">
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="refresh_node" service-data="[[computeNodeServiceData(selectedNode)]]">Refresh Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="refresh_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="refresh_node" hidden$="[[!showHelp]]"></ha-service-description>
 
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="remove_failed_node" service-data="[[computeNodeServiceData(selectedNode)]]">Remove Failed Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="remove_failed_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="remove_failed_node" hidden$="[[!showHelp]]"></ha-service-description>
 
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="replace_failed_node" service-data="[[computeNodeServiceData(selectedNode)]]">Replace Failed Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="replace_failed_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="replace_failed_node" hidden$="[[!showHelp]]"></ha-service-description>
 
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="print_node" service-data="[[computeNodeServiceData(selectedNode)]]">Print Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="print_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="print_node" hidden$="[[!showHelp]]"></ha-service-description>
 
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="heal_node" service-data="[[computeHealNodeServiceData(selectedNode)]]">Heal Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="heal_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="heal_node" hidden$="[[!showHelp]]"></ha-service-description>
 
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="test_node" service-data="[[computeNodeServiceData(selectedNode)]]">Test Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="test_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="test_node" hidden$="[[!showHelp]]"></ha-service-description>
           </div>
           <div class="card-actions">
             <paper-input float-label="New node name" type="text" value="{{newNodeNameInput}}" placeholder="[[computeGetNodeName(selectedNode)]]">
             </paper-input>
             <ha-call-service-button hass="[[hass]]" domain="zwave" service="rename_node" service-data="[[computeNodeNameServiceData(newNodeNameInput)]]">Rename Node</ha-call-service-button>
-            <ha-service-description hass="[[hass]]" domain="zwave" service="rename_node" hidden\$="[[!showHelp]]"></ha-service-description>
+            <ha-service-description hass="[[hass]]" domain="zwave" service="rename_node" hidden$="[[!showHelp]]"></ha-service-description>
            </div>
 
            <div class="device-picker">
@@ -156,7 +156,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
            <template is="dom-if" if="[[!computeIsEntitySelected(selectedEntity)]]">
            <div class="card-actions">
              <ha-call-service-button hass="[[hass]]" domain="zwave" service="refresh_entity" service-data="[[computeRefreshEntityServiceData(selectedEntity)]]">Refresh Entity</ha-call-service-button>
-             <ha-service-description hass="[[hass]]" domain="zwave" service="refresh_entity" hidden\$="[[!showHelp]]"></ha-service-description>
+             <ha-service-description hass="[[hass]]" domain="zwave" service="refresh_entity" hidden$="[[!showHelp]]"></ha-service-description>
            </div>
            <div class="form-group">
              <paper-checkbox checked="{{entityIgnored}}" class="form-control">
diff --git a/src/panels/config/zwave/zwave-network.js b/src/panels/config/zwave/zwave-network.js
index c31860f5fb..0b1ff23017 100644
--- a/src/panels/config/zwave/zwave-network.js
+++ b/src/panels/config/zwave/zwave-network.js
@@ -56,34 +56,34 @@ class ZwaveNetwork extends PolymerElement {
       <paper-card class="content">
         <div class="card-actions">
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="add_node_secure">Add Node Secure</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="add_node_secure" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="add_node_secure" hidden$="[[!showDescription]]"></ha-service-description>
 
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="add_node">Add Node</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="add_node" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="add_node" hidden$="[[!showDescription]]"></ha-service-description>
 
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="remove_node">Remove Node</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="remove_node" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="remove_node" hidden$="[[!showDescription]]"></ha-service-description>
 
         </div>
         <div class="card-actions warning">
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="cancel_command">Cancel Command</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="cancel_command" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="cancel_command" hidden$="[[!showDescription]]"></ha-service-description>
 
         </div>
         <div class="card-actions">
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="heal_network">Heal Network</ha-call-service-button>
 
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="start_network">Start Network</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="start_network" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="start_network" hidden$="[[!showDescription]]"></ha-service-description>
 
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="stop_network">Stop Network</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="stop_network" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="stop_network" hidden$="[[!showDescription]]"></ha-service-description>
 
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="soft_reset">Soft Reset</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="soft_reset" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="soft_reset" hidden$="[[!showDescription]]"></ha-service-description>
 
           <ha-call-service-button hass="[[hass]]" domain="zwave" service="test_network">Test Network</ha-call-service-button>
-          <ha-service-description hass="[[hass]]" domain="zwave" service="test_network" hidden\$="[[!showDescription]]"></ha-service-description>
+          <ha-service-description hass="[[hass]]" domain="zwave" service="test_network" hidden$="[[!showDescription]]"></ha-service-description>
           <ha-call-api-button hass="[[hass]]" path="zwave/saveconfig">Save Config</ha-call-api-button>
 
         </div>
diff --git a/src/state-summary/state-card-cover.js b/src/state-summary/state-card-cover.js
index 6b9f8864bb..86474cdf97 100644
--- a/src/state-summary/state-card-cover.js
+++ b/src/state-summary/state-card-cover.js
@@ -20,8 +20,8 @@ class StateCardCover extends PolymerElement {
     <div class="horizontal justified layout">
       ${this.stateInfoTemplate}
       <div class="horizontal layout">
-        <ha-cover-controls hidden\$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-controls>
-        <ha-cover-tilt-controls hidden\$="[[!entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-tilt-controls>
+        <ha-cover-controls hidden$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-controls>
+        <ha-cover-tilt-controls hidden$="[[!entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-tilt-controls>
       </div>
     </div>
 `;
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
index dbfd09728e..117e988875 100644
--- a/src/state-summary/state-card-display.js
+++ b/src/state-summary/state-card-display.js
@@ -40,7 +40,7 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
     </style>
 
     ${this.stateInfoTemplate}
-    <div class\$="[[computeClassNames(stateObj)]]">[[computeStateDisplay(localize, stateObj, language)]]</div>
+    <div class$="[[computeClassNames(stateObj)]]">[[computeStateDisplay(localize, stateObj, language)]]</div>
 `;
   }
 
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index 462093263c..d95f9721a0 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -44,7 +44,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
     <div class="horizontal justified layout">
       ${this.stateInfoTemplate}
       <div class="state">
-        <div class="main-text" take-height\$="[[!playerObj.secondaryTitle]]">[[computePrimaryText(localize, playerObj)]]</div>
+        <div class="main-text" take-height$="[[!playerObj.secondaryTitle]]">[[computePrimaryText(localize, playerObj)]]</div>
         <div class="secondary-text">[[playerObj.secondaryTitle]]</div>
       </div>
     </div>
diff --git a/src/state-summary/state-card-weblink.js b/src/state-summary/state-card-weblink.js
index 069b3f8830..05f1b80c7b 100644
--- a/src/state-summary/state-card-weblink.js
+++ b/src/state-summary/state-card-weblink.js
@@ -24,7 +24,7 @@ class StateCardWeblink extends PolymerElement {
     </style>
 
     ${this.stateBadgeTemplate}
-    <a href\$="[[stateObj.state]]" target="_blank" class="name" id="link">[[_computeStateName(stateObj)]]</a>
+    <a href$="[[stateObj.state]]" target="_blank" class="name" id="link">[[_computeStateName(stateObj)]]</a>
 `;
   }