Web components - using HTML in labels

Polaris
1

Hey all,

is there a way to use HTML tags in labels in web components?

image
image460×133 5.61 KB

Trying to use <strong> tags to bold some text, but it seems they’re escaped - strong tags are rendered as text:

image
image669×115 11.8 KB

Any suggestions or hacks?

Thanks,
Peter

2

Managed to hack it, not the prettiest but it seems to work:

function decodeShadowDomLabels() {
	// Get all elements that might have shadow roots
	const allElements = document.querySelectorAll('*');

	allElements.forEach(el => {
		if (el.shadowRoot) {
			// Find all label > span elements in the shadow root
			const labelSpans = el.shadowRoot.querySelectorAll('label > span');

			labelSpans.forEach(span => {
				if (span.textContent && span.textContent.includes('<')) {
					span.innerHTML = span.textContent;
				}
			});
		}
	});
}
3

Hi Perice - thanks for posting this solution, it does look like the best option currently.