Web components with Blazor .NET 7

Web components with Blazor .NET 7

Inject order into JavaScript frameworks by replacing them with C# Web Components

Published on Wednesday, May 31, 2023
Opinions

What are Web Components?

Web components are web standards that allow you to create custom, reusable HTML elements. These can encapsulate their styles and behaviors, preventing conflicts with other parts of your website. They are built using HTML, CSS, and JavaScript and can range from simple UI elements to complex, fully-featured web applications.

Web Components with Blazor

Creating Web Components with Blazor Web Assembly was always possible, but versions before .NET 7 were harder to work with. With .NET 7, you need to set in the program.cs Blazor application as a Web Component.

Using Blazor Server for Web Components is possible, but it is less practical than web assembly so I will concentrate on the latter.

  1. Create a new Blazor WebAssembly App
  2. Add Blazor Component - I will use the name VukVukWebComponentsDemo
    • If you want, add interactions, input parameters, etc.
  3. (Optional) Add the component to the index.razor
@page "/"

<h1>Hello, world!</h1>

<VukVukWebComponentsDemo Name="Simce"></VukVukWebComponentsDemo>
  • This simplifies the development of the Components. You can just run them directly from the Component's main project.
    • Remember that the component will be run as a Blazor Component, not as a Web Component!
  1. Add package Microsoft.AspNetCore.Components.CustomElements.
dotnet add package Microsoft.AspNetCore.Components.CustomElements
  1. Add RegisterCustomElement to program.cs.
builder.RootComponents.RegisterCustomElement<Vukvukwebcomponentdemo>("web-component-demo");
  1. Publish Project
dotnet publish

Or use the release tag

dotnet publish -c Release
  1. From the publish directory, find and copy _content and _framework wherever needed.
  • If you are using custom CSS, copy this as well
  1. (Optional) Start any web server like nginx with this or a similar index
<html>
<head>
    <base href="/"/>
    <script src="_framework/blazor.webassembly.js"></script>
</head>
<body>
<h1>zzzz</h1>
    <web-component-demo name="Zzzz"></web-component-demo>

</body>
</html>

web components demo

  • One of the most significant advantages of Web Components is that you don't have to publish it as the same application. Host the web component wherever you want and reference it in the main project.
  1. (Optional) Integrate Web Component into ASP.NET Core project.

For the default template, add these two lines to the head of the _Layout.cshtml

<base href="~/"/>
<script src="~/_framework/blazor.webassembly.js"></script>

And modify the Index.cshtml

by adding

<web-component-demo></web-component-demo>

web components demo in asp.net

  • Specific technologies have different approaches when calling internal and external JS files. You have to figure it out for your use case.

Blazor Web Components Disadvantages

  • File size - The most obvious challenge is the file size of Blazor Web Assembly. It simply is not as slim as some JS solutions.
    • Is it a problem?
      • Probably not.
    • Also, Microsoft is actively working on reducing the size of the Blazor Web Assembly.
  • Mixing Technologies - If you start using Blazor with some frameworks, you will have two (very) different approaches in the same solution.
    • However, maybe the whole point is not having to develop in JS frameworks.
  • Browser Compatibility - Not all browsers fully support web components. And some do not support Web Assembly.
    • However, if you have a browser newer than 2017, you are safe.
  • Complexity - Web components, particularly aspects like the Shadow DOM and custom elements, can be complex and challenging to understand. Are you ready to introduce additional complexity to a solution?
  • SEO Optimization - There is no standardized way to render web components on the server, which can be an issue for applications requiring SEO optimization. However, are frameworks like Angular better in this regard?
  • Documentation - Due to their relative novelty, there may be less documentation, tutorials, or community support for web components. Especially if you plan to use Blazor Web Components

Conclusion

Blazor has somewhat redefined the (ASP.NET) web development landscape by facilitating a seamless blend of both client-side and server-side development using C#.

If your technology stack already embraces C# and .NET for backend tasks, it's worth contemplating transitioning from JavaScript frameworks like Angular, React, and Vue to Blazor. This shift could enhance productivity due to the unification of languages across your application. You could extend this further by writing E2E tests with C# in Playwright.

A big-bang rewrite is always daunting for those with an existing front end. Web Components provide a significant advantage as they provide an incremental pathway to integrating Blazor into your apps.