twitter-bootstrapdartpolymerdart-polymercontent-tag

Correct usage of content tag inside PolymerElements


So I decided that its better to separate Filter from my PolymerTable. I created a PolymerElement for my Filter. I want to show a part of the Table inside the FilterElement, since it should be displayed as a Bootstrap panel with a table. http://getbootstrap.com/components/#panels-tables I'm not sure if I use the content tag right or if thats even possible what im trying. My Code looks a bit like this:

<!-- index.html -->
<!-- ... -->
<poly-table></poly-table>
<!-- ... -->
<!-- poly-table.html -->
<polymer-element name="poly-table">
 <template>
  /* style */
  <div id="table_cont">
   <poly-filter>
    <table class="table">
      /* ... stuff inside ... */
    </table>
   </poly-filter>
  </div>
 </template>
</polymer-element>
<!-- poly-filter.html -->
<polymer-element name="poly-filter">
 <template>
  /* style */
  <div id="filter_cont" class="panel">
   <div class="panel-heading">
     Filter
   </div>
   <div class="panel-body>
     <!-- Filter Content here -->
   </div>
   <content></content>
  </div>
 </template>
</polymer-element>

My Table will get rendered outside and above my filter instead of under the Filter...

I override parseDeclaration in PolyFilter so the <poly-filter> element gets rendered in the light DOM.

parseDeclaration(elementElement) {
  var template = fetchTemplate(elementElement);
  if (template != null) {
    lightFromTemplate(template);
  } 
}

Solution

  • I suppose the <content> element is not working when you render the element in the light DOM.