polymer - ポリマー Web コンポーネント内の picturefill 要素がコンテナーの寸法を失う

Question

ポリマーを使用して作成しているWebコンポーネント内で、 picturefill jsライブラリ<picture>によって作成された要素を使用しようとしていますが、コンテナ要素から寸法を取得していないため、可能な限り最小の画像を選択しています。<picture>

コンテナーが 100% であることを確認するなど、スタイリングでこれを行うための無数の試みの中で、:host に display:block を与えようとしましたが、何も機能しません。

これは、最小の画像を使用してポリマー製の要素を表示し、次に正しい画像を表示する独自の要素を表示する、私がやろうとしていることのコードペンです。<picture>

ライブ codepen バージョンでは<hr>、ポリマー要素によって作成された (水平ルール) 要素が全幅であるため、コンテナーの正しい幅を理解することに注意してください。

これはコードペンのコードです:

```

<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>

```

これに関するヘルプは大歓迎です。

ありがとう、スコット