diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js
index 1974b60fb4..069b50f58c 100644
--- a/src/components/entity/state-info.js
+++ b/src/components/entity/state-info.js
@@ -7,6 +7,14 @@ import computeStateName from '../../common/entity/compute_state_name.js';
 
 class StateInfo extends PolymerElement {
   static get template() {
+    return html`
+    ${this.styleTemplate}
+    ${this.stateBadgeTemplate}
+    ${this.infoTemplate}
+`;
+  }
+
+  static get styleTemplate() {
     return html`
     <style>
     :host {
@@ -38,23 +46,31 @@ class StateInfo extends PolymerElement {
       color: var(--secondary-text-color);
     }
     </style>
+`;
+  }
 
-      <state-badge state-obj="[[stateObj]]"></state-badge>
+  static get stateBadgeTemplate() {
+    return html`
+    <state-badge state-obj="[[stateObj]]"></state-badge>
+`;
+  }
 
-      <div class="info">
-        <div class="name" in-dialog\$="[[inDialog]]">[[computeStateName(stateObj)]]</div>
+  static get infoTemplate() {
+    return html`
+    <div class="info">
+      <div class="name" in-dialog\$="[[inDialog]]">[[computeStateName(stateObj)]]</div>
 
-        <template is="dom-if" if="[[inDialog]]">
-          <div class="time-ago">
-            <ha-relative-time datetime="[[stateObj.last_changed]]"></ha-relative-time>
-          </div>
-        </template>
-        <template is="dom-if" if="[[!inDialog]]">
-          <div class="extra-info">
-            <slot>
-          </slot></div>
-        </template>
-      </div>
+      <template is="dom-if" if="[[inDialog]]">
+        <div class="time-ago">
+          <ha-relative-time datetime="[[stateObj.last_changed]]"></ha-relative-time>
+        </div>
+      </template>
+      <template is="dom-if" if="[[!inDialog]]">
+        <div class="extra-info">
+          <slot>
+        </slot></div>
+      </template>
+    </div>
 `;
   }
 
diff --git a/src/state-summary/state-card-climate.js b/src/state-summary/state-card-climate.js
index c5ed9831f4..51535473f8 100644
--- a/src/state-summary/state-card-climate.js
+++ b/src/state-summary/state-card-climate.js
@@ -22,12 +22,18 @@ class StateCardClimate extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <ha-climate-state state-obj="[[stateObj]]"></ha-climate-state>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       stateObj: Object,
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 8cac696e3d..936e0c1f7f 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -20,7 +20,7 @@ class StateCardConfigurator extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-button hidden\$="[[inDialog]]">[[stateObj.state]]</paper-button>
     </div>
 
@@ -31,6 +31,12 @@ class StateCardConfigurator extends PolymerElement {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       stateObj: Object,
diff --git a/src/state-summary/state-card-cover.js b/src/state-summary/state-card-cover.js
index 9a89280e89..dbc3fbcfb7 100644
--- a/src/state-summary/state-card-cover.js
+++ b/src/state-summary/state-card-cover.js
@@ -18,7 +18,7 @@ class StateCardCover extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${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>
@@ -27,6 +27,12 @@ class StateCardCover extends PolymerElement {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
index 6c8aec455e..f233f1d215 100644
--- a/src/state-summary/state-card-display.js
+++ b/src/state-summary/state-card-display.js
@@ -39,11 +39,17 @@ class StateCardDisplay extends LocalizeMixin(PolymerElement) {
       }
     </style>
 
-    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+    ${this.stateInfoTemplate}
     <div class\$="[[computeClassNames(stateObj)]]">[[computeStateDisplay(localize, stateObj, language)]]</div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-input_number.js b/src/state-summary/state-card-input_number.js
index 9121bf00ee..6941fc3250 100644
--- a/src/state-summary/state-card-input_number.js
+++ b/src/state-summary/state-card-input_number.js
@@ -38,9 +38,9 @@ class StateCardInputNumber extends mixinBehaviors([
     </style>
 
     <div class="horizontal justified layout" id="input_number_card">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
-        <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" step="[[step]]" hidden="[[hiddenslider]]" pin="" on-change="selectedValueChanged" on-click="stopPropagation" id="slider" ignore-bar-touch="">
-        </paper-slider>
+      ${this.stateInfoTemplate}
+      <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" step="[[step]]" hidden="[[hiddenslider]]" pin="" on-change="selectedValueChanged" on-click="stopPropagation" id="slider" ignore-bar-touch="">
+      </paper-slider>
       <paper-input no-label-float="" auto-validate="" pattern="[0-9]+([\\.][0-9]+)?" step="[[step]]" min="[[min]]" max="[[max]]" value="{{value}}" type="number" on-change="selectedValueChanged" on-click="stopPropagation" hidden="[[hiddenbox]]">
       </paper-input>
       <div class="state" hidden="[[hiddenbox]]">[[stateObj.attributes.unit_of_measurement]]</div>
@@ -49,6 +49,12 @@ class StateCardInputNumber extends mixinBehaviors([
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   ready() {
     super.ready();
     if (typeof ResizeObserver === 'function') {
diff --git a/src/state-summary/state-card-input_select.js b/src/state-summary/state-card-input_select.js
index ad85dd53d8..a8d36e0bbd 100644
--- a/src/state-summary/state-card-input_select.js
+++ b/src/state-summary/state-card-input_select.js
@@ -31,7 +31,7 @@ class StateCardInputSelect extends PolymerElement {
       }
     </style>
 
-    <state-badge state-obj="[[stateObj]]"></state-badge>
+    ${this.stateBadgeTemplate}
     <paper-dropdown-menu on-click="stopPropagation" selected-item-label="{{selectedOption}}" label="[[_computeStateName(stateObj)]]">
       <paper-listbox slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
         <template is="dom-repeat" items="[[stateObj.attributes.options]]">
@@ -42,6 +42,12 @@ class StateCardInputSelect extends PolymerElement {
 `;
   }
 
+  static get stateBadgeTemplate() {
+    return html`
+    <state-badge state-obj="[[stateObj]]"></state-badge>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-input_text.js b/src/state-summary/state-card-input_text.js
index 631c6a80c8..a4b05a6c7c 100644
--- a/src/state-summary/state-card-input_text.js
+++ b/src/state-summary/state-card-input_text.js
@@ -16,13 +16,20 @@ class StateCardInputText extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-input no-label-float="" minlength="[[stateObj.attributes.min]]" maxlength="[[stateObj.attributes.max]]" value="{{value}}" auto-validate="[[stateObj.attributes.pattern]]" pattern="[[stateObj.attributes.pattern]]" type="[[stateObj.attributes.mode]]" on-change="selectedValueChanged" on-click="stopPropagation" placeholder="(empty value)">
       </paper-input>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index bea423f667..8dbcb8821f 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -42,7 +42,7 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <div class="state">
         <div class="main-text" take-height\$="[[!playerObj.secondaryTitle]]">[[computePrimaryText(localize, playerObj)]]</div>
         <div class="secondary-text">[[playerObj.secondaryTitle]]</div>
@@ -51,6 +51,12 @@ class StateCardMediaPlayer extends LocalizeMixin(PolymerElement) {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index f5f3124feb..34d17f386b 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -24,12 +24,18 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <paper-button on-click="activateScene">[[localize('ui.card.scene.activate')]]</paper-button>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
index 4ac2ee71b2..8ef55a9860 100644
--- a/src/state-summary/state-card-script.js
+++ b/src/state-summary/state-card-script.js
@@ -30,7 +30,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <template is="dom-if" if="[[stateObj.attributes.can_cancel]]">
         <ha-entity-toggle state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
       </template>
@@ -41,6 +41,12 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-timer.js b/src/state-summary/state-card-timer.js
index dbf9fd3a7f..3e908ce0d4 100644
--- a/src/state-summary/state-card-timer.js
+++ b/src/state-summary/state-card-timer.js
@@ -28,12 +28,18 @@ class StateCardTimer extends LocalizeMixin(PolymerElement) {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <div class="state">[[_secondsToDuration(timeRemaining)]]</div>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-toggle.js b/src/state-summary/state-card-toggle.js
index cd4f81455f..40e1711589 100644
--- a/src/state-summary/state-card-toggle.js
+++ b/src/state-summary/state-card-toggle.js
@@ -17,12 +17,18 @@ class StateCardToggle extends PolymerElement {
     </style>
 
     <div class="horizontal justified layout">
-      <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+      ${this.stateInfoTemplate}
       <ha-entity-toggle state-obj="[[stateObj]]" hass="[[hass]]"></ha-entity-toggle>
     </div>
 `;
   }
 
+  static get stateInfoTemplate() {
+    return html`
+    <state-info state-obj="[[stateObj]]" in-dialog="[[inDialog]]"></state-info>
+`;
+  }
+
   static get properties() {
     return {
       hass: Object,
diff --git a/src/state-summary/state-card-weblink.js b/src/state-summary/state-card-weblink.js
index d07f2d1a0f..069b3f8830 100644
--- a/src/state-summary/state-card-weblink.js
+++ b/src/state-summary/state-card-weblink.js
@@ -23,11 +23,17 @@ class StateCardWeblink extends PolymerElement {
       }
     </style>
 
-    <state-badge state-obj="[[stateObj]]"></state-badge>
+    ${this.stateBadgeTemplate}
     <a href\$="[[stateObj.state]]" target="_blank" class="name" id="link">[[_computeStateName(stateObj)]]</a>
 `;
   }
 
+  static get stateBadgeTemplate() {
+    return html`
+    <state-badge state-obj="[[stateObj]]"></state-badge>
+`;
+  }
+
   static get properties() {
     return {
       stateObj: Object,