From f69f257d1230234eda108e7958cfd94fc27ad166 Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Thu, 17 Apr 2025 13:45:40 +0100
Subject: [PATCH] Refines `umb-localize` rendering (#19075)

---
 .../packages/core/localization/localize.element.ts  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts
index 11aa824808..ce2df299d3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/localization/localize.element.ts
@@ -1,4 +1,4 @@
-import { css, customElement, html, property, state, unsafeHTML } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, property, state, unsafeHTML, when } from '@umbraco-cms/backoffice/external/lit';
 import { escapeHTML } from '@umbraco-cms/backoffice/utils';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
@@ -53,12 +53,11 @@ export class UmbLocalizeElement extends UmbLitElement {
 	}
 
 	override render() {
-		const text = this.text;
-		return text
-			? unsafeHTML(text)
-			: this.debug
-				? html`<span style="color:red">${this.key}</span>`
-				: html`<slot></slot>`;
+		return when(
+			this.text,
+			(text) => unsafeHTML(text),
+			() => (this.debug ? html`<span style="color:red">${this.key}</span>` : html`<slot></slot>`),
+		);
 	}
 
 	static override styles = [