How can I use packery with polymer elements?

I've been searching for hours now on how to use packery in combination with polymer elements. What I want to achieve is an element that is a content list, with in it an element that's the content item. I want to content items to be "packaried".

To clarify:

<packery-element>
<template repeat="{{item in items}}">
<content-item class="item"></content-item>
</template>
</packery-element>

Solution

We created our own custom element, that also uses bin-packing algorithm: <juicy-tile-list>: http://juicy.github.io/juicy-tile-list/

Then, all you need is:

<link rel="import" href="../juicy-tile-list/dist/juicy-tile-list.html">
...
<juicy-tile-list>
  <div>Some</div>
  <div>tiles</div>
  <section>here</section>
</juicy-tile-list>

We are pretty focused on development of this one, so in case of any problem please fill GH issue. We'll be more than thankful for any feedback.

We extended it with couple of additional features, like:

pririties items,
grouping into virtual, nested containers,
alignment in different orientations/directions,
dynamically changing size,
auto adjusting container sizes,
gap/gutter/cell-spacing between tiles,
adapting to window size changes.

And created two side components:

<juicy-tile-grid> - to use adaptive features of native CSS Grid Layout,
<juicy-tile-editor> to make fiddling with tiles easier.

We also have plan to separate core Masonry/Packery like behavior from all additional features for cleaner and faster code, for those that don't need that.