ディスプレイグリッドがPolymerで正しく機能しない

Question

私は、コンテナのサイズが変更されたときに要素の順序を変更するレスポンスグリッドを作成しようとしています。

コンテナが大きくなると、十分なスペースがあれば、2行目の要素だけが行に入ります。十分なスペースがない場合、要素間のスペースは、2行目の要素が最初の行内に収まるまで大きくなります。

Here is a working example how it's realized without Polymer

しかし、私はカスタムポリマー要素内にこれを埋め込む場合、問題があります。 2つの要素の間のスペースは変更されません。この問題に対する解決策はありますか？ここで

は私のポリマー要素である：

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 

<dom-module id="test-element"> 
    <template> 
     <style> 
      .container { 
       min-height: 400px; 
       display: grid; 
       grid-template-columns: repeat(auto-fill, 60px); 
       justify-content: space-around; 
       align-items: center; 
       align-content: start; 
      } 

      .item { 
       flex: 0 0 auto; 
       margin: 5px; 
       width: 50px; 
       height: 50px; 
       background-color: green; 
      } 
     </style> 
     <div class="container"> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
      <div class="item"></div> 
     </div> 
    </template> 
    <script> 
     class TestElement extends Polymer.Element { 
      static get is() { 
       return 'test-element'; 
      } 

     } 
     window.customElements.define(TestElement.is, TestElement); 
    </script> 
</dom-module> 

Answer 1

おそらく、あなたの問題は、あなたがホスト要素の表示スタイルを設定していないということです。

カスタム要素が表示されている：インラインデフォルトでは、幅や高さを設定しても効果はありません。これはしばしば開発者にとって驚きであり、ページのレイアウトに関連する問題を引き起こす可能性があります。インライン表示を好まない場合は、常にデフォルトの表示値を設定する必要があります。

出典：Custom Element Best Practices, Web Fundamentals

私はポリマー3を使用していますが、それは本当にすべての違いを作るべきではありません。

import {Element as PolymerElement} from './node_modules/@polymer/polymer/polymer-element.js'; 

class TestElement extends PolymerElement { 
    static get template() { 
    return ` 
     <style> 
     :host { 
      display: block; 
     } 
     .container { 
      min-height: 400px; 
      display: grid; 
      grid-template-columns: repeat(auto-fill, 60px); 
      justify-content: space-around; 
      align-items: center; 
      align-content: start; 
     } 
     .item { 
      flex: 0 0 auto; 
      margin: 5px; 
      width: 50px; 
      height: 50px; 
      background-color: green; 
     } 
     </style> 
     <div class="container"> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     <div class="item"></div> 
     </div> 
    `; 
    } 
} 

customElements.define('test-element', TestElement); 

そして、 "それを実行"：

<html> 
    <head> 
    <script type="module" src="./test-element.js"></script> 
    </head> 
    <body> 
    <test-element id="test"></test-element> 
    </body> 
</html> 

これは私が見ているものです：