dom-repeat中的网格布局中断

Question

在聚合物元素中，我正在尝试用lost-grid构建一个简单的多列布局，以便使用dom-repeat呈现一个项目列表。它看起来是这样的：

HTML

<div class="grid"> 
  <template is="dom-repeat" items="{{data}}">
     <div class="grid__col">Example Content</div>
  </template>
</div>

CSS

.grid {
  lost-utility: clearfix;
  lost-center: 100%;
  position: relative;
}
.grid__col {
  lost-column: 1/2 2 0px; 
}

例如，如果分配给dom-repeat的数据数组有4个项目，则会呈现以下HTML：

<div class="grid"> 
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
</div>

不是以50%的宽度显示列，而是打破布局并将它们堆叠在一起。如果我删除dom-repeat并手动列出4列，它可以工作。在这两种情况下，最后的代码是相同的，所以我猜模板的呈现以某种方式扰乱了列可以占据的总宽度。

另一件要注意的事情是，当在页面主体中直接使用dom-bind模板内的完全相同的代码时(在聚合物元素外部，但使用dom-repeat)，它可以工作。

Answer 1

我很快就读到了《迷失》。如果你一定要使用它，我不能给你一个明确的答案，但是如果你只有几个div要对齐，聚合物布局管理器似乎就足够了。

在类似的情况下，我使用了wrap布局和lost CSS操作符(它似乎在幕后与calc()一起使用)。

<div class='horizontal layout wrap'>

这里有很多带有模板重复的div

</div>

这是一个基本的示例，当然需要进行自定义。

希望这能有所帮助。

Answer 2

我怀疑这可能是由于影子DOM造成的。你是在使用shadow DOM还是在使用shady DOM？如果您使用的是阴影DOM，则需要在元素的dom-module中添加CSS才能使其生效。

换句话说，你应该有这样的东西：

<dom-module id="an-element-with-grid">
    <link rel="import" type="css" href="an-element-with-grid.css"> <!-- This will be the home of your lost CSS -->
    <template>
        <div class="grid"> 
            <template is="dom-repeat" items="{{data}}">
                <div class="grid__col">Example Content</div>
            </template>
        </div>
    </template>
</dom-module>

这是根据阴影DOM规范。元素的阴影DOM中的节点对外部作用域是隐藏的，以防止外部样式践踏元素的内部样式。