RegisterCustomElement stopped working in Blazor 8

[rudibelt]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

I upgraded the solution as found in https://github.com/khalidabuhakmeh/BlazorCustomElementsSample to .NET 8. Now the customelement no longer loads. If I use the old blazor.webassembly.js the customelement loads.

Expected Behavior

I expect that the customelement is loaded. see branch feature/net8 in repo https://github.com/rudibelt/BlazorCustomElementsSample

Steps To Reproduce

run the code in featre/net8. customelement is no longer loaded

Exceptions (if any)

No response

.NET Version

8.0.100

Anything else?

No response

[javiercn]

@rudibelt thanks for contacting us.

Your sample doesn't setup Blazor Web correctly. As a starting point we suggest you start with a blank Blazor Web template with interactivity to begin with and add the code to register the custom elements.

[rudibelt]

Hi, I create a new Blazor Web App with WebAssembly Interactive rende mode. Added a component Counter and use it in an index.html for the custom CustomElement scenario. Please see https://github.com/rudibelt/BlazorAppCustomElementsNet8 for this sample and the steps I toke in the commits. The sample works when using blazor.webassembly.js but not for blazor.web.js

[sebitsi]

@mkArtakMSFT

We also encountered the same problem. It would be greatly appreciated if the problem could be analyzed earlier and not until the 7th preview. The use of custom web components is very useful in the transition of old applications to Blazor. This error blocks us from performing the transition. Waiting for the final version of .NET 9 or the preview is undesirable.

[KirillFridman]

Hi, I faced the same issue migrating from 7 to 8. The hint I found out which may be useful: to make Blazor Custom elements to work one should force Blazor to setup Web Socket connection with server part (in 7 it was always the case). To do this, one can either set @rendermode InteractiveServer for the blazor page container for custom elements, or somehow force magic script _framework/blazor.web.js to do this within html page

[xcaptain]

Same problem here, I followed https://learn.microsoft.com/en-us/aspnet/core/blazor/components/js-spa-frameworks?view=aspnetcore-8.0

RegisterForJavaScript is working, but RegisterCustomElement not working. Custom Element is a very useful feature, I want to generate a blazor wasm component to use in wordpress, react, anguare apps.

[MackinnonBuck]

The reason this doesn't always work is because blazor.web.js doesn't start an interactive runtime until an interactive component gets rendered from the server. And since it's the interactive runtime that registers custom elements in the first place, this creates a bit of a chicken and egg problem (we don't know if a custom element represents a Blazor component until we initialize the interactive runtime that registers the custom element).

We should update our docs to not suggest using a "Blazor Web"-style app for scenarios utilizing custom elements. Instead, we should show how to set up custom element scenarios utilizing blazor.server.js or blazor.webassembly.js. The primary use for Blazor custom elements is when incorporating Blazor into an existing JavaScript app, which probably means it's not already a Blazor Web app in the first place.

However, we should definitely consider adding full support in the future for custom elements and JS root components when using blazor.web.js. This would allow mixing different render modes in the same app and lazily initializing circuits or the .NET WebAssembly runtime. We could add new APIs to overcome the existing limitations preventing this from working today:

• A declarative model for defining custom elements so that we can discover them at build time (before initializing the WebAssembly runtime, for example)
• A way to specify a render mode when adding a root component via JS or when using a custom element

@guardrex, could we update these docs to not reference "Blazor Web App" scenarios? It's best that developers stick to blazor.server.js and blazor.webassembly.js when integrating with an existing JavaScript app (until we add better support for blazor.web.js in the future).