What is this string inside Blazor components HTML tag

Question

I'm new to Blazor and trying to figure out how Blazor renders components into HTML tags. If I use a simple component like this:

<InputText @bind-Value="testvalue" id="sample-textbox"></InputText>

@code {
    public string testvalue = "abc123";
}

Then I run my app, open dev tools, the resulting HTML is this:

<input id="sample-textbox" _bl_e4f3714a-7294-49f4-9c79-90762626ed41="">

What is the purpose of _bl_e4f3714a-7294-49f4-9c79-90762626ed41 ?

Answer 1

It's simply an identifier that Blazor uses to control DOM elements, in the same way that other frameworks and libraries do.

Others frameworks use Virtual DOMS and the identifier is not visible when the elements are renderer.

For example, Angular uses identifiers like this:

<div _ngcontent-ng-c1557778241="" class="scrollable guidance-carousel">

Answer 2

To add my few cents here: there's this github thread with this comment about it. I will only quote relevant part here:

The _bl_* attributes are added by client-side JS code for interactively-rendered elements that have a @ref. The attributes are not present in the initial HTML.
As such, if you only use SSR, you will not see these attributes at all (since SSR-only elements are not interactively-rendered).

So this attribute is something "very internal" to Blazor mechanisms.