MarkupString 属性能否将一串自定义组件转换为 DOM 中的 HTML 元素

Question

I have created a Blazor server side application. And then add the custom component inside the MarkupString . MarkupString only converts the declared string as a HTML tag. But it will not convert the custom component as a HTML elements. Is this supported in Blazor platform.

Counter declares the counter component (custom component):

<div style="height:100%; width:100%;">
    @((MarkupString)@Markup)
</div>
@code {
   string Markup = "<Counter></Counter>";
}

Counter.razor page contains the following code.

<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>

<h3>Development Mode</h3>
<p>
    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
    It can result in displaying sensitive information from exceptions to end users.
    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
    and restarting the app.
</p>

Expected output:

I am expecting to execute the counter component and render the output elements in DOM.

Answer 1

Can MarkupString property convert a string of custom component into HTML elements in DOM

No, it can't.

MarkupString allows you to render raw HTML. It parses MarkupString content as HTML or SVG and then insert it into the DOM. However, it won't render your Counter component. Instead it converts the tag to lowercase, and treat it as an HTML tag. This is the result:

<div style="height:100%; width:100%;">
    <counter></counter>
</div>

Is this supported in Blazor platform.

As you can see, it is not. However, that might be possible in the future, perhaps by the Blazor community. I'm not sure about this, but I think that Steve Sanderson had something related to this...

Hope this helps...