Generic RenderFragment not allowing parameters

Question

I create a component PopupForm which take PopupFormAvatar component as parameter

[Parameter]
public RenderFragment PopupFormAvatar { get; set; }

[Parameter]
public RenderFragment ChildContent { get; set; }

PopupFormAvatar also takes multiple parameters.

[Parameter]
public RenderFragment ChildContent { get; set; }

[Parameter]
public string Text { get; set; }

I want to use it like this

<PopupForm Model="model" OnValidSubmit="OnValidSubmit" Setting="popupFormSettings">

  <PopupFormAvatar Text="asdad">
      <CustomerImage></CustomerImage> // as ChildContent
  </PopupFormAvatar>

  <ChildContent>
     Other content goes here
  </ChildContent>
 </PopupForm>

It throws the error Unrecognized attribute Text on child content element PopupFormAvatar

if in my popup component if I only take one parameter as ChildContent it works, but I want PopupFormAvatar and other content separately

[Parameter]
public RenderFragment ChildContent { get; set; } // instead of PopupFormAvatar 

or put it inside ChildContent

<PopupForm Model="model" OnValidSubmit="OnValidSubmit" Setting="popupFormSettings">

  <ChildContent>
     <PopupFormAvatar Text="asdad">
         <CustomerImage></CustomerImage> // as ChildContent
      </PopupFormAvatar>
  </ChildContent>
  

 </PopupForm>

Answer 1

Your main point of confusion is understandable: the problem is that when you use syntax like <PopupFormAvatar> it's ambiguous in certain contexts. In your case, you are trying to use an element name (PopupFormAvatar) to refer to a property. So you're telling PopupForm that for the property named PopupFormAvatar use this particular fragment. This is represented by the following code:

<PopupFormAvatar Text="asdad">
    <CustomerImage></CustomerImage> // as ChildContent
</PopupFormAvatar>

Here's the problem: while most of the time in Blazor, the syntax <PopupFormAvatar> would refer to a component, in this case it does not refer to a component. It refers to a property of PopupForm, which declares the PopupFormAvatar property as a render fragment. This means that you have literally not done anything with your actual PopupFormAvatar component here -- the fact that component exists is completely irrelevant; the name PopupFormAvatar is simply the name of the property and the fact that it also matches a component is an unhappy coincidence.

This is why you get the error, Unrecognized attribute Text on child content element PopupFormAvatar. Because that attribute is only recognized for the component -- which has not been enlisted.

To make this work, you simply have to recognize all of that and supply the actual component:

<PopupFormAvatar>
    <PopupFormAvatar Text="Hello World">
        asdfasdfas
    </PopupFormAvatar>
</PopupFormAvatar>

Note the duplication of PopupFormAvatar as an element. The first is slotting in for the property. The latter is providing the actual content. This is why the Text attribute can be assigned -- the nested version is actually using your Blazor component (as opposed to referring to the property).