Guard passing invalid tag to customElements.whenDefined (#7696)

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 (
+    if (customCls) {
-      customCls ||
+      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
-        );
 
-        customElements
+    // Custom elements are required to have a - in the name
-          .whenDefined(customTag)
+    if (!customTag.includes("-")) {
-          .then(() => resolve(customElements.get(customTag)));
+      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}`;