Exploring the new built-in component

When Blazor first came out, there were a couple of things that were hard to do and in some cases, we needed to involve JavaScript to solve the challenge. In this section, we will take a look at some of the new components that we got in .NET 5 and .NET 6.

We will take a look at the following new components or functions:

• Setting the focus of the UI
• Influencing HTML head
• Component virtualization
• Error boundaries

Setting the focus of the UI

One of my first Blazor blog posts was about how to set the focus on a UI element, but now this is built into the framework. The previous solution involved JavaScript calls to change the focus on a UI element.

By using ElementReference, you can now set the focus on the element.

Let's build a component to test the behavior of this new feature:

1. In the Components project, in the Pages folder, add a new Razor component, and name it SetFocus.razor.
2. Open SetFocus.razor and add a page directive:

@page "/setfocus...