Blazor Components (like InputSelect, InputText) are rendered to HTML without scope identifier

[KarloX2]

Working with .NET 5.0 RC2 I have the problem that components like InputText are rendered to HTML (from razor) without a scope identifier attribute. Not sure if scope identifier is the correct term, what I mean is this:

A plain <input type="text" ...> in razor is rendered into e.g.: <input class="form-control" type="text" b-p5ext164c4>

whereas a <InputText> is rendered into the same HTML element but without the b-p5ext164c4 attribute.

This means that I cannot easily address the <InputText> with scoped CSS in my page.

[javiercn]

@KarloX2 thanks for contacting us.

That happens because they are different components and aren't in scope of the component you are writing. You can target those elements by wrapping them in an element within your component and providing the appropriate CSS class.

div.myStyle ::deep input{ font-size: 20px; }

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.