Ensure ha-card is defined for vertical-stack

jcwillox · Jul 6, 2020 · efd4615 · efd4615
1 parent 209902e
commit efd4615
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/src/const.js b/src/const.js
@@ -4,12 +4,11 @@ export const DEFAULT_SECONDARY_INFO = [
   "last-triggered",
 ];
 
-export const VERTICAL_STACK_IN_CARD_STYLE =
-  `
+export const VERTICAL_STACK_IN_CARD_STYLE = `
     #root > *:not(:first-child) {
       margin-top: -24px;
     }
-` + customElements.get("ha-card").getStyles().cssText;
+`;
 
 export const NO_CARD_STYLE = {
   boxShadow: "none",

diff --git a/src/modules/vertical-stack.js b/src/modules/vertical-stack.js
@@ -32,19 +32,25 @@ if (moduleEnabled(MODULE)) {
     }
   };
 
-  createModule(ELEMENT, function () {
-    if (
-      this._config.in_card === true &&
-      extensionEnabled(this._config, "in_card")
-    ) {
-      // remove space between cards in the stack add ha-card background.
-      let styleElement = document.createElement("style");
-      styleElement.innerHTML = VERTICAL_STACK_IN_CARD_STYLE;
-      this.shadowRoot.appendChild(styleElement);
+  // require ha-card to be defined so we can take its style
+  customElements.whenDefined("ha-card").then(() => {
+    const IN_CARD_STYLE =
+      VERTICAL_STACK_IN_CARD_STYLE +
+      customElements.get("ha-card").getStyles().cssText;
+    createModule(ELEMENT, function () {
+      if (
+        this._config.in_card === true &&
+        extensionEnabled(this._config, "in_card")
+      ) {
+        // remove space between cards in the stack add ha-card background.
+        let styleElement = document.createElement("style");
+        styleElement.innerHTML = IN_CARD_STYLE;
+        this.shadowRoot.appendChild(styleElement);
 
-      // remove style from all ha-card child elements.
-      let divElement = this.shadowRoot.querySelector("#root");
-      applyStyles(divElement);
-    }
+        // remove style from all ha-card child elements.
+        let divElement = this.shadowRoot.querySelector("#root");
+        applyStyles(divElement);
+      }
+    });
   });
 }