picturefill element inside a polymer web component loses container dimensions - polymer

Question

I'm trying to use the <picture> element, which is created by the picturefill js library, inside of a web component I'm creating using Polymer, but it is choosing the smallest possible image as <picture> is not getting any dimensions from the container element.
I have tried giving :host a display:block among a myriad of other atempts at doing this with styling, including making sure the container is 100%, but nothing works.
Here is a codepen of what I'm trying to do showing the polymer-made element using the smallest image, then the <picture> element on it's own showing the correct image.
Note that in the live codepen version that the <hr> (horizontal rule) elements created by the polymer-element are the full width and thus understand the correct width of the container.
This is the code in the codepen:
```
<polymer-element name="picture-container" attributes="value">
<template>
<style>
:host {
display: block;
border: 1px solid #000;
padding: 1em;
}
</style>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
</template>
<script>
Polymer('picture-container');
</script>
</polymer-element>
<picture-container></picture-container>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
```
any help on this greatly appreciated.
thanks,
Scott

Answer 1

UPDATE
There is a running thread on this on the picturefill github issues section. That thread gave a new option in the script section which made this work correctly in Firefox and Safari:
<script>
Polymer('picture-container',{
ready: function() {
picturefill({elements: this.shadowRoot.getElementsByTagName('img')});
}
});
</script>
Example codepen: http://codepen.io/scottnath/pen/Wboayg
I discovered that in Firefox (33.03) if I go into about:config and change these two settings to true:
dom.image.srcset.enabled
dom.image.picture.enabled
then this mimics the incorrect behavior of chrome for the picture element.
Still no solution though...