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

Hamed Vaziri 136 Reputation points
2023-02-03T16:39:26.1333333+00:00

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

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,078 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,350 questions
0 comments No comments
{count} votes

8 answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 53,426 Reputation points
    2023-02-03T18:21:55.8933333+00:00

    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"/>
    
    1. add any other resource
    2. add link to the blazor app js
        <script src="https://mysite.com/_framework/blazor.server.js"></script>
    
    1. add custom element to page

  2. Bruce (SqlWork.com) 53,426 Reputation points
    2023-02-03T18:22:31.47+00:00

    (post to force previous post to appear)

    0 comments No comments

  3. Hamed Vaziri 136 Reputation points
    2023-02-03T20:42:45.74+00:00

    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

    0 comments No comments

  4. Hamed Vaziri 136 Reputation points
    2023-02-03T21:57:51.1666667+00:00

    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());
    
    0 comments No comments

  5. Hamed Vaziri 136 Reputation points
    2023-02-03T21:58:51.6466667+00:00

    And also this code not works :

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