Blazor CSS isolation for object added by code

Viewed 84

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

0 Answers
Related