I have a project in blazor webAssembly and with css isolation.
I have a popup component where I create the text dynamically with some part in bold :
info = info.Replace($"{{{i}}}", $"<b>{System.Web.HttpUtility.HtmlEncode(args[i])}</b>");
And I display it with MarkupString
And I want to display the text with only the bold element having a word-break, so I added :
.popup-text > b {
word-break: break-all;
}
And the issue is that the b selector is not found because Blazor add an identifier
.popup-text > b[b-vrkbxbsj8g]
Is there a way to either get the identifier and add it when I create the object or to prevent the selector b to have an identifier ?
Or maybe other nice solution if you have one