diff --git a/demo/src/stubs/lovelace.ts b/demo/src/stubs/lovelace.ts
index 6f831c325d..53ada3e2e0 100644
--- a/demo/src/stubs/lovelace.ts
+++ b/demo/src/stubs/lovelace.ts
@@ -19,15 +19,15 @@ export const mockLovelace = (
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));
 };
 
-customElements.whenDefined("hui-view").then(() => {
+customElements.whenDefined("hui-card").then(() => {
   // eslint-disable-next-line
-  const HUIView = customElements.get("hui-view");
+  const HUIView = customElements.get("hui-card");
   // Patch HUI-VIEW to make the lovelace object available to the demo card
-  const oldCreateCard = HUIView!.prototype.createCardElement;
+  const oldCreateCard = HUIView!.prototype.createElement;
 
-  HUIView!.prototype.createCardElement = function (config) {
+  HUIView!.prototype.createElement = function (config) {
     const el = oldCreateCard.call(this, config);
-    if (el.tagName === "HA-DEMO-CARD") {
+    if (config.type === "custom:ha-demo-card") {
       (el as HADemoCard).lovelace = this.lovelace;
     }
     return el;
diff --git a/src/panels/lovelace/cards/hui-card.ts b/src/panels/lovelace/cards/hui-card.ts
index 55809e58d0..01b3a1846f 100644
--- a/src/panels/lovelace/cards/hui-card.ts
+++ b/src/panels/lovelace/cards/hui-card.ts
@@ -59,14 +59,20 @@ export class HuiCard extends ReactiveElement {
     return configOptions;
   }
 
+  // Public to make demo happy
+  public createElement(config: LovelaceCardConfig) {
+    const element = createCardElement(config) as LovelaceCard;
+    element.hass = this.hass;
+    element.editMode = this.lovelace.editMode;
+    return element;
+  }
+
   public setConfig(config: LovelaceCardConfig): void {
     if (this._config === config) {
       return;
     }
     this._config = config;
-    this._element = createCardElement(config);
-    this._element.hass = this.hass;
-    this._element.editMode = this.lovelace.editMode;
+    this._element = this.createElement(config);
 
     while (this.lastChild) {
       this.removeChild(this.lastChild);
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index 08bd846a55..f74984d32b 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -74,8 +74,7 @@ export class HUIView extends ReactiveElement {
 
   private _viewConfigTheme?: string;
 
-  // Public to make demo happy
-  public createCardElement(cardConfig: LovelaceCardConfig) {
+  private _createCardElement(cardConfig: LovelaceCardConfig) {
     const element = document.createElement("hui-card");
     element.hass = this.hass;
     element.lovelace = this.lovelace;
@@ -371,7 +370,7 @@ export class HUIView extends ReactiveElement {
     }
 
     this._cards = config.cards.map((cardConfig) => {
-      const element = this.createCardElement(cardConfig);
+      const element = this._createCardElement(cardConfig);
       return element;
     });
   }
@@ -393,7 +392,7 @@ export class HUIView extends ReactiveElement {
     cardElToReplace: HuiCard,
     config: LovelaceCardConfig
   ): void {
-    const newCardEl = this.createCardElement(config);
+    const newCardEl = this._createCardElement(config);
     if (cardElToReplace.parentElement) {
       cardElToReplace.parentElement!.replaceChild(newCardEl, cardElToReplace);
     }