fix: Class not being set in FluentBadge

[martin2karlsson]

🐛 Bug Report

💻 Repro or Code Sample

I created a new project with

dotnet new blazor

• Added Fluent package
• Added reference in Program.cs
• Added a using statement in the _Imports.razor
• Modified the App.Razor:

@page "/"

<PageTitle>Home</PageTitle>

<FluentBadge Class="--set-primary-color">

    This is a test
</FluentBadge>

<h1>Hello, world!</h1>

Welcome to your new app.

🤔 Expected Behavior

I expected the class to be set on FluentBadge but it was not. This was working in 4.7.2

😯 Current Behavior

💁 Possible Solution

I could rollback to the earlier version, or write a js script to set the class name.

🔦 Context

🌍 Your Environment

• OS & Device: Windows 10
• Browser Microsoft Edge
• .NET and Fluent UI Blazor library Version 8.0.7 and 4.9.3 (working in 8.0.7 and 4.7.2)

[vnbaaij]

I don't think you can start a class name with '--' as that is reserved for css variables and gets filtered out. See also #2255

If you use just '-', it ill get rendered: