I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path. This project is part of a Razor class library.
During testing, I encountered some unexpected behavior that I traced back to a class name conflict with a Bootstrap class that is also being used in my Index.cshtml file. To resolve this issue, I decided to rename the class names in my component to prevent any conflicts, which successfully restored the expected behavior.
However, I had anticipated that by using this naming convention for the CSS file, all class names in the HTML and CSS would automatically receive some sort of randomly generated suffix or attribute (like the b-????????? suffix) to prevent clashes. This made me question whether I have misunderstood the concept of CSS Isolation entirely.