Hey all,
is there a way to use HTML tags in labels in web components?
Trying to use <strong>
tags to bold some text, but it seems they’re escaped - strong tags are rendered as text:
Any suggestions or hacks?
Thanks,
Peter
Hey all,
is there a way to use HTML tags in labels in web components?
Trying to use <strong>
tags to bold some text, but it seems they’re escaped - strong tags are rendered as text:
Any suggestions or hacks?
Thanks,
Peter
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;
}
});
}
});
}