Nesting web components from dart code

Question

I have multiple nested web components to represent a grid. I need to compose these in dart code. I have a function to create the web component as recommended by the dart docs :

void addWebComponent(WebComponent component,String tagName,WebComponent parent) { 
    component.host = (new Element.html("<${tagName}></${tagName}>"));        
    var lifecycleCaller = new ComponentItem(component)
    ..create();
    parent.append(component.host);
    lifecycleCaller.insert();
    return;
}

Each web component contains a template like so :

  <template>
      <div class="grid">
         <div class="large-12 columns" >                    
            <content></content>
         </div>
       </div>          
  </template>

My assumption is that calling parent.append(component.host); will add the injected web component html into the CONTENT element. It doesn't. This is what I'm expecting as a result :

<x-grid>
      <div class="grid">
         <div class="large-12 columns">
             <x-row> 
                  <div class="row">...</div>           
             </x-row>
         </div>
       </div>          
</x-grid>

This is what I get :

 <x-grid>
      <div class="grid">
         <div class="large-12 columns"> 
                 **[Content should be here!]**               
         </div>
       </div>    
         **[ CONTENT ENDS UP HERE]**
         <x-row> 
                  <div class="row">...</div>           
             </x-row>

</x-grid>

My guess is that from dart code you can't add to the web component's content via parent.append(component.host). Is there some other function or steps required to make this work? It's killing me.

Answer 1

Try this:

Add to parent:

List<WebComponent> items = toObservable([]);

Change:

parent.append(component.host);

To:

parent.items.add(component);

Then modify the HTML to be like:

<template>
  <div class="grid">
     <div class="large-12 columns" template iterate="item in items">                    
        {{ new SafeHtml.unsafe(item.host.innerHtml) }}
     </div>
  </div>          
</template>