How can I tell when Blazor has finished rendering a DOM element?

The lifecycle methods OnAfterRenderAsync and OnAfterRender are called only when a component has finished rendering. The element and component references are populated at this point. By using these methods, the user can activate third-party JavaScript libraries that operate based on the DOM elements. 

Razor file 

@page "/" 
<input type="text" @bind="@message" /> 

@code{ 
    private string? message { get; set; } 
    protected override async Task OnAfterRenderAsync ( bool firstRender ) 
    { 
        // Perform any asynchronous operations after the component has been rendered 
        if (firstRender) 
        { 
            message = "Component rendering finished"; 
            await Task.Yield(); // Ensure the UI rendering is complete 
            StateHasChanged(); // Trigger UI update 
        } 
    } 

    protected override void OnAfterRender ( bool firstRender ) 
    { 
        // Perform any synchronous operations after the component has been rendered 
        Console.WriteLine("Component rendering completed"); 
        base.OnAfterRender(firstRender); 
    } 
}