diff --git a/src/panels/config/zha/ha-config-zha.ts b/src/panels/config/zha/ha-config-zha.ts
index a8b70fe340..1ef70032e2 100755
--- a/src/panels/config/zha/ha-config-zha.ts
+++ b/src/panels/config/zha/ha-config-zha.ts
@@ -1,18 +1,18 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { Cluster } from "../../../data/zha";
 import "../../../layouts/ha-app-layout";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import {
   ZHAClusterSelectedParams,
@@ -27,8 +27,6 @@ import "./zha-node";
 export class HaConfigZha extends LitElement {
   public hass?: HomeAssistant;
   public isWide?: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _selectedNode?: HassEntity;
   private _selectedCluster?: Cluster;
   private _selectedEntity?: HassEntity;
@@ -45,7 +43,6 @@ export class HaConfigZha extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-app-layout>
         <app-header slot="header">
           <app-toolbar>
@@ -114,24 +111,8 @@ export class HaConfigZha extends LitElement {
     this._selectedEntity = selectedEntityEvent.detail.entity;
   }
 
-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-    `;
+  static get styles(): CSSResult[] {
+    return [haStyle];
   }
 
   private _onBackTapped(): void {
diff --git a/src/panels/config/zha/zha-cluster-attributes.ts b/src/panels/config/zha/zha-cluster-attributes.ts
index 146801bd42..7c3c9e39d0 100644
--- a/src/panels/config/zha/zha-cluster-attributes.ts
+++ b/src/panels/config/zha/zha-cluster-attributes.ts
@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
@@ -20,7 +21,7 @@ import {
   readAttributeValue,
   ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@@ -36,8 +37,6 @@ export class ZHAClusterAttributes extends LitElement {
   public selectedNode?: HassEntity;
   public selectedEntity?: ZHADeviceEntity;
   public selectedCluster?: Cluster;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _attributes: Attribute[];
   private _selectedAttributeIndex: number;
   private _attributeValue?: any;
@@ -80,7 +79,6 @@ export class ZHAClusterAttributes extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div style="position: relative" slot="header">
           <span>Cluster Attributes</span>
@@ -254,24 +252,18 @@ export class ZHAClusterAttributes extends LitElement {
     this._attributeValue = "";
   }
 
-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
         .content {
           margin-top: 24px;
         }
@@ -287,8 +279,15 @@ export class ZHAClusterAttributes extends LitElement {
         }
 
         .attribute-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -316,7 +315,8 @@ export class ZHAClusterAttributes extends LitElement {
           display: none;
         }
       </style>
-    `;
+    `,
+    ];
   }
 }
 
diff --git a/src/panels/config/zha/zha-cluster-commands.ts b/src/panels/config/zha/zha-cluster-commands.ts
index 30e506e1c8..8e64333ea9 100644
--- a/src/panels/config/zha/zha-cluster-commands.ts
+++ b/src/panels/config/zha/zha-cluster-commands.ts
@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
 import { HassEntity } from "home-assistant-js-websocket";
@@ -16,7 +17,7 @@ import {
   fetchCommandsForCluster,
   ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@@ -32,8 +33,6 @@ export class ZHAClusterCommands extends LitElement {
   public selectedEntity?: ZHADeviceEntity;
   public selectedCluster?: Cluster;
   private _showHelp: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _commands: Command[];
   private _selectedCommandIndex: number;
   private _manufacturerCodeOverride?: number;
@@ -72,7 +71,6 @@ export class ZHAClusterCommands extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div class="sectionHeader" slot="header">
           <span>Cluster Commands</span>
@@ -198,24 +196,18 @@ export class ZHAClusterCommands extends LitElement {
     this._issueClusterCommandServiceData = this._computeIssueClusterCommandServiceData();
   }
 
-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
         .content {
           margin-top: 24px;
         }
@@ -231,8 +223,15 @@ export class ZHAClusterCommands extends LitElement {
         }
 
         .command-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -269,7 +268,8 @@ export class ZHAClusterCommands extends LitElement {
           display: none;
         }
       </style>
-    `;
+    `,
+    ];
   }
 }
 
diff --git a/src/panels/config/zha/zha-clusters.ts b/src/panels/config/zha/zha-clusters.ts
index bf00ffdddd..e5525a6cf5 100644
--- a/src/panels/config/zha/zha-clusters.ts
+++ b/src/panels/config/zha/zha-clusters.ts
@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -15,7 +16,7 @@ import {
   fetchClustersForZhaNode,
   ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { ItemSelectedEvent } from "./types";
@@ -40,8 +41,6 @@ export class ZHAClusters extends LitElement {
   public selectedEntity?: ZHADeviceEntity;
   private _selectedClusterIndex: number;
   private _clusters: Cluster[];
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
 
   constructor() {
     super();
@@ -75,7 +74,6 @@ export class ZHAClusters extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this._renderStyle()}
       <div class="node-picker">
         <paper-dropdown-menu label="Clusters" class="flex">
           <paper-listbox
@@ -122,27 +120,28 @@ export class ZHAClusters extends LitElement {
     });
   }
 
-  private _renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
         .node-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -151,8 +150,8 @@ export class ZHAClusters extends LitElement {
           color: grey;
           padding: 16px;
         }
-      </style>
-    `;
+      `,
+    ];
   }
 }
 
diff --git a/src/panels/config/zha/zha-entities.ts b/src/panels/config/zha/zha-entities.ts
index 561adf50ad..069329ad46 100644
--- a/src/panels/config/zha/zha-entities.ts
+++ b/src/panels/config/zha/zha-entities.ts
@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-item/paper-item";
@@ -12,7 +13,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { fetchEntitiesForZhaNode } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent } from "./types";
 
@@ -31,8 +32,6 @@ export class ZHAEntities extends LitElement {
   public selectedNode?: HassEntity;
   private _selectedEntityIndex: number;
   private _entities: HassEntity[];
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
 
   constructor() {
     super();
@@ -64,7 +63,6 @@ export class ZHAEntities extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this._renderStyle()}
       <div class="node-picker">
         <paper-dropdown-menu label="Entities" class="flex">
           <paper-listbox
@@ -125,27 +123,28 @@ export class ZHAEntities extends LitElement {
     });
   }
 
-  private _renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
         .node-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -163,8 +162,8 @@ export class ZHAEntities extends LitElement {
           color: grey;
           padding: 16px;
         }
-      </style>
-    `;
+      `,
+    ];
   }
 }
 
diff --git a/src/panels/config/zha/zha-network.ts b/src/panels/config/zha/zha-network.ts
index 1bd65f6859..bbd70a1629 100644
--- a/src/panels/config/zha/zha-network.ts
+++ b/src/panels/config/zha/zha-network.ts
@@ -1,16 +1,17 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 
@@ -18,8 +19,6 @@ export class ZHANetwork extends LitElement {
   public hass?: HomeAssistant;
   public isWide?: boolean;
   private _showHelp: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
 
   constructor() {
     super();
@@ -36,7 +35,6 @@ export class ZHANetwork extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div style="position: relative" slot="header">
             <span>Network Management</span>
@@ -71,24 +69,10 @@ export class ZHANetwork extends LitElement {
     this._showHelp = !this._showHelp;
   }
 
-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
         .content {
           margin-top: 24px;
         }
@@ -119,7 +103,8 @@ export class ZHANetwork extends LitElement {
           display: none;
         }
       </style>
-    `;
+    `,
+    ];
   }
 }
 
diff --git a/src/panels/config/zha/zha-node.ts b/src/panels/config/zha/zha-node.ts
index a3e26570a3..e9ec2170e5 100644
--- a/src/panels/config/zha/zha-node.ts
+++ b/src/panels/config/zha/zha-node.ts
@@ -1,9 +1,10 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
@@ -16,7 +17,7 @@ import computeStateName from "../../../common/entity/compute_state_name";
 import sortByName from "../../../common/entity/states_sort_by_name";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@@ -45,8 +46,6 @@ export class ZHANode extends LitElement {
   private _selectedNode?: HassEntity;
   private _selectedEntity?: HassEntity;
   private _serviceData?: {};
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _nodes: HassEntity[];
 
   constructor() {
@@ -71,7 +70,6 @@ export class ZHANode extends LitElement {
   protected render(): TemplateResult | void {
     this._nodes = this._computeNodes(this.hass);
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div class="sectionHeader" slot="header">
           <span>Node Management</span>
@@ -242,24 +240,18 @@ export class ZHANode extends LitElement {
     this._selectedEntity = entitySelectedEvent.detail.entity;
   }
 
-  private renderStyle(): TemplateResult {
-    if (!this._haStyle) {
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .flex {
+          -ms-flex: 1 1 0.000000001px;
+          -webkit-flex: 1;
+          flex: 1;
+          -webkit-flex-basis: 0.000000001px;
+          flex-basis: 0.000000001px;
+        }
+
         .content {
           margin-top: 24px;
         }
@@ -289,8 +281,15 @@ export class ZHANode extends LitElement {
         }
 
         .node-picker {
-          @apply --layout-horizontal;
-          @apply --layout-center-center;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -311,8 +310,8 @@ export class ZHANode extends LitElement {
           right: 0;
           color: var(--primary-color);
         }
-      </style>
-    `;
+      `,
+    ];
   }
 }