Blazor: The comments added to the html can ruin the markup with a pre tag

Describe the bug

Blazor automatically adds markup to the final html in the form of empty comments <!--!--> this is usually not a problem. However, in the case of the <pre /> tag it can be. When creating a component that encapsulates the <pre /> tag in it, extra lines are added to the rendered output in the html.

To Reproduce

1. Create a component that has a pre tag (and in my case which makes it worse a code tag)
2. Render the ChildContent inside the pre (and code)
3. Consider setting the background color of the pre tag to make the issue more visible
4. You can also see this in action at: https://chanan.github.io/BlazorStyled/
5. Editing the html in the browser dev tools, removing the extra <!--!--> tags fixes the output

Expected behavior

I am not sure if this possible as I assume Blazor uses them for something, but removing those extra tags would be great

Screenshots

Additional context

3.0.0-preview5

[SteveSandersonMS]

Your problem isn’t the comment nodes. Comment nodes don’t affect the layout. Your problem is with whitespace text nodes inside your components.

If you have a component CodeBlock.razor:

<pre style="color: white; background-color: blue;">
    @ChildContent
</pre>

@functions {
    [Parameter] RenderFragment ChildContent { get; set; }
}

… and use it like this:

<CodeBlock>
    This is my code
    And another line
</CodeBlock>

… then you have leading and trailing whitespace in both places. This shows up in the UI. This isn’t unique to Blazor, but is an aspect of HTML generally: https://stackoverflow.com/questions/14946908/how-can-i-ignore-leading-and-trailing-linebreaks-within-an-html-code-block-usi In some cases it’s trickier to work around with Blazor components than it would be with plain HTML, but the underlying principle is the same.

You can avoid the whitespace, e.g.:

<pre style="color: white; background-color: blue;">@ChildContent</pre>

@functions {
    [Parameter] RenderFragment ChildContent { get; set; }
}

… and use it like this:

<CodeBlock>This is my code
And another line</CodeBlock>

I know it’s annoying to have to format your source code like that. One possible alternative would be to use Razor comments to hide the whitespace from the browser:

<CodeBlock>@*              
*@This is my code
Another line@*
*@</CodeBlock>

Arguably we should consider stripping whitespace from the start/end of RenderFragment but it’s not an easy choice to make. Sometimes you might be using the whitespace on purpose because you need it. cc @rynowak in case he has thoughts on that.

---

Sidenote: The comment nodes are how Blazor tracks which part of the DOM corresponds to which Blazor components. To avoid having them, we’d need to invent and implement a totally different way of tracking this, which would be a significant block of work that could cause issues in other areas. I’m not sure we’d have any reason to do this for the forseeable future, as the comment nodes don’t cause problems in known cases, or at least not mainstream ones.

[egil]

It would be nice if the comments could be removed from the output, if not from all generated code, then from select components that match certain conditions.