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

Hamed Vaziri 136

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

8 answers

Bruce (SqlWork.com) 56,031 Reputation points

2023-02-04T00:19:13.1666667+00:00

your sample html file has to be hosted by a web server and must use the same protocol (http/https) as the blazer server.

also not sure blazor server can open the correct signal/r hub if its a different website. You may be able to get around this by configuring the signal/r hub in javascript blazor startup:

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-7.0

note: all the examples have the server website hosting the custom element also hosting the blazor app.

you might find blazor WASM easier, as you can just deploy the static resources to the website hosting the html that will use it.
Please sign in to rate this answer.
Hamed Vaziri 136 Reputation points

2023-02-04T08:50:25.5366667+00:00

Thanks for reply

I've published my sample html file to my iis and above problems has been solved. but still not working!

In console, i'm facing new error(s) :

Get http://localhost/CustomElementConsumer/_blazor/initializers [HTTP/1.1 404 Not Found 2ms] Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data blazor.server.js:1:132427

What's the problem ?

Thanks in advance

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2023-02-07T09:02:09.2033333+00:00

Hi @Hamed Vaziri

Whether the application works well on develop/local environment?

Generally, the 404 error means that the URL is invalid, you can check it whether the url is correct or not? Compare it with the url in the local environment.

Besides, since the original question have been solved and this is a new error, I suggest you can close this question and create a new question for the new error. And, in the new question, you can create a simple, complete sample to reproduce the problem. It's easier for the community to see the new question and help you.

Hamed Vaziri 136 Reputation points

2023-02-07T17:15:50.1966667+00:00

Thanks Zhi Lv

Ok, of course!!!
Sign in to comment
Bruce (SqlWork.com) 56,031 Reputation points

2023-02-04T00:19:44.39+00:00

(post to display previous post - ms please fix this)
Please sign in to rate this answer.

0 comments No comments
Sign in to comment
Hamed Vaziri 136 Reputation points

2023-02-06T10:20:18.1733333+00:00

Can anybody help me ?
Please sign in to rate this answer.

0 comments No comments
Sign in to comment