From 7d3acc747dedf2d5409f322c40d7d428a1ee875e Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Tue, 17 Nov 2020 09:40:35 +0100
Subject: [PATCH] Guard passing invalid tag to customElements.whenDefined
 (#7696)

---
 .../create-element/create-element-base.ts     | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts
index 5c35c44a0a..a3c700d28b 100644
--- a/src/panels/lovelace/create-element/create-element-base.ts
+++ b/src/panels/lovelace/create-element/create-element-base.ts
@@ -104,6 +104,10 @@ const _customCreate = <T extends keyof CreateElementConfigTypes>(
     `Custom element doesn't exist: ${tag}.`,
     config
   );
+  // Custom elements are required to have a - in the name
+  if (!tag.includes("-")) {
+    return element;
+  }
   element.style.display = "None";
   const timer = window.setTimeout(() => {
     element.style.display = "";
@@ -244,20 +248,26 @@ export const getLovelaceElementClass = async <
 
   if (customTag) {
     const customCls = customElements.get(customTag);
-    return (
-      customCls ||
-      new Promise((resolve, reject) => {
-        // We will give custom components up to TIMEOUT seconds to get defined
-        setTimeout(
-          () => reject(new Error(`Custom element not found: ${customTag}`)),
-          TIMEOUT
-        );
+    if (customCls) {
+      return customCls;
+    }
 
-        customElements
-          .whenDefined(customTag)
-          .then(() => resolve(customElements.get(customTag)));
-      })
-    );
+    // Custom elements are required to have a - in the name
+    if (!customTag.includes("-")) {
+      throw new Error(`Custom element not found: ${customTag}`);
+    }
+
+    return new Promise((resolve, reject) => {
+      // We will give custom components up to TIMEOUT seconds to get defined
+      setTimeout(
+        () => reject(new Error(`Custom element not found: ${customTag}`)),
+        TIMEOUT
+      );
+
+      customElements
+        .whenDefined(customTag)
+        .then(() => resolve(customElements.get(customTag)));
+    });
   }
 
   const tag = `hui-${type}-${tagSuffix}`;