Substantive.Blazor.CustomElements

Utility helpers that make it easier to discover and register Blazor components as HTML custom elements using the Microsoft.AspNetCore.Components.CustomElements package.

Getting started

1. Decorate components that should be exposed as custom elements using the [BlazorCustomElement] attribute:

   @attribute [BlazorCustomElement("status-indicator")]
   <span class="status">@Message</span>
   @code {
       [Parameter] public string? Message { get; set; }
   }
   

2. Compose a CustomElementCollection in your host, then register every definition with the builder's RootComponents:

   using Substantive.Blazor.CustomElements;
   
   var builder = WebAssemblyHostBuilder.CreateDefault(args);
   var elements = new CustomElementCollection()
       .DiscoverFromAssembly(typeof(StatusBadge).Assembly)
       .Register<Counter>("counter-widget");
   
   builder.RootComponents.RegisterCustomElements(elements);
   await builder.Build().RunAsync();
   

The collection validates tag names, prevents duplicate registrations, and supports assembly scanning so that large solutions can organise custom elements declaratively.

Sample component

The Substantive.DevTools.Blazor package ships a CustomElements/StatusIndicator.razor sample that demonstrates how to ship a polished custom element from a Razor class library:

@namespace Substantive.DevTools.Blazor.CustomElements
@attribute [BlazorCustomElement("status-indicator")]

<div class="status-indicator" role="status">
    <span class="status-indicator__dot" style="background-color:@DotColor"></span>
    <span>@Message</span>
</div>

You can register it using the discovery helpers:

var elements = new CustomElementCollection()
    .DiscoverFromAssembly(typeof(Substantive.DevTools.Blazor.CustomElements.StatusIndicator).Assembly);

builder.RootComponents.RegisterCustomElements(elements);