显示网格在 Polymer 中无法正常工作

Question

我正在尝试制作一个响应式网格，当容器调整大小时它会改变元素的顺序。

如果容器变大，那么第二行的元素只有在有足够空间的情况下才会进入上一行。如果没有足够的空间，元素之间的空间会变大，直到第二行的元素可以放入第一行。

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

但问题是如果我将它嵌入到自定义 Polymer 元素中。两个元素之间的空间不会改变。这个问题有解决办法吗？

这是我的聚合物元素：

<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

也许你的问题是你没有在宿主元素上设置显示样式：

自定义元素默认为 display: inline ，因此设置它们的宽度或高度将不起作用。这通常会让开发人员感到意外，并可能导致与布局页面相关的问题。除非您更喜欢内联显示，否则应始终设置默认显示值。

来源：Custom Element Best Practices, Web Fundamentals

我正在使用 Polymer 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>

这就是我所看到的：