You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*[CustomElementsBlazorSample (Blazor Server) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-server`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-server): Blazor Server is supported in .NET 8/9. To migrate this .NET 7 sample, see <xref:migration/70-to-80#update-a-blazor-server-app> and <xref:migration/80-to-90>.
32
-
*[CustomElementsBlazorSample (Blazor WebAssembly) (`javiercn/CustomElementsBlazorSample`, branch: `blazor-wasm`)](https://github.com/javiercn/CustomElementsBlazorSample/tree/blazor-wasm): To migrate this .NET 7 sample, see <xref:migration/70-to-80#update-a-blazor-webassembly-app> and <xref:migration/80-to-90>.
30
+
To migrate either of these .NET 7 samples, see the following resources:
31
+
32
+
*<xref:migration/70-to-80>
33
+
*<xref:migration/80-to-90>
34
+
*<xref:migration/90-to-100>
35
+
36
+
The principle updates to make are:
37
+
38
+
* Update the [target framework monikers (TFMs)](/dotnet/standard/frameworks) to the latest version.
39
+
* Update the .NET package references and Angular dependencies to their latest versions.
Take the following steps to register a root component as a custom element in a Blazor WebAssembly app.
352
+
Register a root component as a custom element in a Blazor WebAssembly app. In the following example, the code:
344
353
345
-
Add the <xref:Microsoft.AspNetCore.Components.Web?displayProperty=fullName> namespace to the top of the `Program` file:
346
-
347
-
```csharp
348
-
usingMicrosoft.AspNetCore.Components.Web;
349
-
```
350
-
351
-
Add a namespace for the app's components. In the following example, the app's namespace is `BlazorSample` and the components are located in the `Pages` folder:
354
+
* Adds a namespace for the app's components. In the example, the app's namespace is `BlazorSample`, and the components are located in the `Pages` folder.
355
+
* Provides access to the API in the <xref:Microsoft.AspNetCore.Components.Web?displayProperty=fullName> namespace.
356
+
* Calls <xref:Microsoft.AspNetCore.Components.Web.CustomElementsJSComponentConfigurationExtensions.RegisterCustomElement%2A> on <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents> to register the `Counter` component with the custom HTML element `my-counter`.
Call <xref:Microsoft.AspNetCore.Components.Web.CustomElementsJSComponentConfigurationExtensions.RegisterCustomElement%2A> on <xref:Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.RootComponents>. The following example registers the `Counter` component with the custom HTML element `my-counter`:
@@ -475,3 +482,7 @@ Generate JavaScript (JS) components from Razor components for JavaScript technol
475
482
476
483
> [!WARNING]
477
484
> The Angular and React component features are currently **experimental, unsupported, and subject to change or be removed at any time**. We welcome your feedback on how well this particular approach meets your requirements.
0 commit comments