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);
}
}
I suppose the <content>
element is not working when you render the element in the light DOM.