Use slot for tile card info (#27046)

src/components/tile/ha-tile-info.ts

@@ -1,20 +1,21 @@
-import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
-import { html, css, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-tile-info")
 export class HaTileInfo extends LitElement {
   @property() public primary?: string;
 
-  @property() public secondary?: string | TemplateResult<1>;
+  @property() public secondary?: string;
 
   protected render() {
     return html`
       <div class="info">
-        <span class="primary">${this.primary}</span>
+        <slot name="primary" class="primary">
-        ${this.secondary
+          <span>${this.primary}</span>
-          ? html`<span class="secondary">${this.secondary}</span>`
+        </slot>
-          : nothing}
+        <slot name="secondary" class="secondary">
+          <span>${this.secondary}</span>
+        </slot>
       </div>
     `;
   }
@@ -27,7 +28,8 @@ export class HaTileInfo extends LitElement {
       align-items: flex-start;
       justify-content: center;
     }
-    span {
+    span,
+    ::slotted(*) {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;

src/panels/lovelace/cards/hui-tile-card.ts

@@ -325,11 +325,12 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
               ></ha-state-icon>
               ${renderTileBadge(stateObj, this.hass)}
             </ha-tile-icon>
-            <ha-tile-info
+            <ha-tile-info id="info">
-              id="info"
+              <span slot="primary" class="primary">${name}</span>
-              .primary=${name}
+              ${stateDisplay
-              .secondary=${stateDisplay}
+                ? html`<span slot="secondary">${stateDisplay}</span>`
-            ></ha-tile-info>
+                : nothing}
+            </ha-tile-info>
           </div>
           ${features.length > 0
             ? html`