I've been trying over the last few days to createt a custom element to use nested HTML. I'm trying to create something like this:
<bt-sortable-list>
<strong>{{name}}</strong> {{comment}}
<bt-sortable-list>
Where the embedded HTML is used as the contents of the list, and then the name and comment are attributes of an object in an array set on bt-sortable-list. The general idea is that bt-sortable-list would be a list of elements based on a list that can be visually sorted via the UI. I've tried to pull the HTML off of the custom element and stash it in a template inside of the bt-sortable-list element, but then it seems as though the <template repeat> statement never fires (or fires before I am able to append it). Ideally, I would want the underlying array to be updated when the list is visually changed. And when the array is changed outside of the UI, then the elements would be resorted. I could go ahead and create a custom element for my case, but it would be nice to have a more generic component that could be shared/used elsewhere. I've been trying to stay away from jQuery for this, and I would love to have an all Polymer solution for this.
Is what I'm trying to do feasible? Should I be adding another custom element inside to demarcate the nested html (kind of like ul/li)? Any advice on how to proceed with this would be greatly appreciated.
Thanks,
Bob