title: Razor Components (Blazor) - render-mode affecting lists of derived classes
body: <p>I've got a Razor Component i'm dropping onto a Razor page like so:</p>
  
  <pre><code>&lt;component type="typeof(ElementProductComponent)"
  render-mode="Server"
  param-elementList="Model.elementList" /&gt;
  </code></pre>
  
  <p>I'm passing a list (elementList) into the component as a parameter.</p>
  
  <p>The list is declared in the razor page code behind as</p>
  
  <pre><code> [BindProperty]    
  public List&lt;ElementModel&gt; elementList { get; set; }
  </code></pre>
  
  <p>ElementModel is a base class. The list will normally contain items of various types derived from the base class (ElementTextModel, ElementDateModel, etc)</p>
  
  <p>In the codebind for the razor page the list is populated like this:</p>
  
  <pre><code> public async Task&lt;IActionResult&gt; OnGet(string id)
      {
          elementList = GetList();
  
          return Page();
      }
      public static List&lt;ElementModel&gt; GetList()
      {
          var elements = new List&lt;ElementModel&gt;();
  
          elements.Add(new ElementTextModel { Name = "TestTextName", Value = "hello world" });
          elements.Add(new ElementDateModel { Name = "TestDateName", Value = "20200101" });
  
          return elements;
  
      }
  </code></pre>
  
  <p>The models look like this:</p>
  
  <pre><code>public class ElementModel
  {
  
      [Required] 
      public string Name { get; set; }
  
  
      [Required] 
      public virtual ElementType Type { get; }
  
  
  
  }
  
   public class ElementTextModel : ElementModel
  {
  
      [Required]
      public string Value { get; set; }
  
      public Hashtable Attributes { get; set; }
  
      [Required]
      public override ElementType Type { get { return ElementType.TEXT; } }
  }
  </code></pre>
  
  <p>Then in my component, I want to iterate over the list and display different html, child components based on the type of each item in the list. I can do that that with a switch or if. Here is a simplified version of the code where I'm just trying to display the type I see.</p>
  
  <pre><code>    &lt;div&gt;
      Elements:
      &lt;ul&gt;
          @for (var i = 0; i &lt; elementList.Count; i++)
          {
          &lt;li&gt;       
                  &lt;div&gt;@elementList[i].Type&lt;/div&gt;
                  &lt;div&gt;@elementList[i].Name&lt;/div&gt;
  
          &lt;/li&gt;
  
          }
      &lt;/ul&gt;
  &lt;/div&gt;
  @code {
  
      [Parameter]
      public List&lt;ElementModel&gt; elementList { get; set; }
  
  }
  </code></pre>
  
  <p>The issue is that when I declare the component like</p>
  
  <pre><code>&lt;component type="typeof(ElementProductComponent)"
  render-mode="Server"
  param-elementList="Model.elementList" /&gt;
  </code></pre>
  
  <p>with the render-mode set to Server, the code in the component sees the items in the elementList as of type ElementModel, regardless of how they were declared. This isn't correct.</p>
  
  <p>if I do this:</p>
  
  <pre><code>&lt;component type="typeof(ElementProductComponent)"
  render-mode="Static"
  param-elementList="Model.elementList" /&gt;
  </code></pre>
  
  <p>and set the render-mode to Static, the component sees the list correctly, as a mixed list of items of types derived from the base class.</p>
  
  <p>Why is this happening? Is this a bug or is there some configuration issue at play?</p>