How to implement custom elements in blazor 7 (Practical guide) ?

Question

Hi everyone

As you know, one of the new features of blazor 7 is custom elements. But there is not enough references & guides which demonstrate how to implement this.

for example, I want to create custom element in my blazor server app, then consume it from another webSite such as wordpress site, but i don't know how to implement & consume it in wordpress site.

Can anybody help me & give me a step-by-step guide to accomplish this ?

Thanks in advance

Answer 1

add the custom element package, and add html custom element support:

options.RootComponents.RegisterCustomElement<Counter>("my-counter");

enable CORS

https://www.syncfusion.com/faq/blazor/general/how-do-you-enable-cors-in-a-blazor-server-application

build and deploy website.

on a site that want to use blazor app:

1. add required css links

      <link href="https://mysite.com/css/site.css" rel="stylesheet"/>
      <link href="https://mysite.com/BlazorServer.styles.css" rel="stylesheet"/>

2. add any other resource
3. add link to the blazor app js

    <script src="https://mysite.com/_framework/blazor.server.js"></script>

4. add custom element to page

Answer 2

(post to force previous post to appear)

Answer 3

Thanks everybody ..

My above problems was solved. But i'm facing new problem!

When i publish my sample blazor web app, I'm facing this error during publish :

Unable to copy file "C:\Users\110.nuget\packages\microsoft.aspnetcore.components.customelements\7.0.2\staticwebassets\Microsoft.AspNetCore.Components.CustomElements.lib.module.js" to "D:\Development\TestAndSamples\Blazor\CustomEelementSample01\CustomEelementSample01\CustomEelementSample01\obj\Release\net7.0\PubTmp\Out\wwwroot_content\Microsoft.AspNetCore.Components.CustomElements\Microsoft.AspNetCore.Components.CustomElements.lib.module.js". Could not find a part of the path 'D:\Development\TestAndSamples\Blazor\CustomEelementSample01\CustomEelementSample01\CustomEelementSample01\obj\Release\net7.0\PubTmp\Out\wwwroot_content\Microsoft.AspNetCore.Components.CustomElements\Microsoft.AspNetCore.Components.CustomElements.lib.module.js'.

Apparently this file was not found in my project or computer :

Microsoft.AspNetCore.Components.CustomElements.lib.module.js

Answer 4

Hi again!

I've solved my above problems and add my custom element into a simple html.

But when i open it, i'm facing this error in firefox console section :

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///D:/Development/Tools/Web/JavaScriptLoadingSample/_blazor/initializers. (Reason: CORS request not http).

This code not works :

options.AddPolicy("NewPolicy", builder =>
          builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader());

Answer 5

And also this code not works :

builder.AllowAnyMethod()
            .AllowCredentials()
            .SetIsOriginAllowed((host) => true)
            .AllowAnyHeader());