Patterns for collections of polymorphic objects in Polymer? -

say have 2 separate lists of polymorphic objects: shape -> circle , shape -> rectangle. shape contains properties "name" , "description", while circle contains properties "center" , "radius" , rectangle contains "length" , "width" properties. i'd have single polymer component, "shape-list", able handle display of either list of circles or list of rectangles , display specific properties of each type in list.

"shape-list"'s template might so:

<template>   <ul>     <template is="dom-repeat" items="[[shapes]]" as="shape">       <li>         <shape-entry shape="[[shape]]">           <!-- user of shape-list knows whether want display                rectangles or circles.  want customize display                of each shape-entry information specific each                shape using sort of prototype element supplied                shape-list tag. -->           <content select="..."></content>         </shape-entry>       </li>     </template>   </ul> </template> 

and "shape-entry"'s template so:

<template>   name: <span>[[shape.name]]</span>   description: <span>[[shape.description]]</span>   <!-- ideally take passed-in prototype element ,        stamp out here. -->   <content select="...?"></content> </template> 

further, have templates "shape-circle" , "shape-rect":

shape-circle:

<template>   center: <span>[[shape.center]]</span>   radius: <span>[[shape.radius]]</span> </template> 

shape-rect:

<template>   length: <span>[[shape.length]]</span>   width: <span>[[shape.width]]</span> </template> 

the usage ideally following:

i can see 2 ways of accomplishing above:

1. not using "content" tags, instead setting property on shape-list , shape-entry elements actual prototype object reference or name of specific shape, having magic javascript creates instance of specific shape element based on property , manually wiring of data binding together. yields additional complexity assemble elements , data binding.

2. replicate "shape-list" , "shape-entry" "rect-list", "circle-list" , "rect-entry", "circle-entry", , share styles , behaviors between subtypes. results in code duplication.

is there better way of accomplishing above? i'd (ideally) prefer entirely declarative approach!

you have shape-list component uses "if" template display proper shape component (rect-entry, circle-entry ). each shape entry should declare shared behavior, e.g shapebehavior has shared shape behavior avoid duplicity.

.. inside dom-repeat   <template is="dom-if" if="{{_isrect(item)}}" >     <rect-entry shape={{item}} ></rect-entry>   </template>   <template is="dom-if" if="{{_iscircle(item)}}" >     <circle-entry shape={{item}} ></circle-entry>   </template> 

if want dynamically pass element should used , programatically solution needed.