Vaadin Grid Row 详细信息未在 Chrome 中显示答案

【问题标题】：Vaadin Grid Row details not showing in ChromeVaadin Grid Row 详细信息未在 Chrome 中显示
【发布时间】：2016-06-06 15:26:00
【问题描述】：

*注意这适用于 jsbin，但不适用于我的本地项目。

我有一个基于新 Polymer CLI 的应用程序。 index.html -> main-app.html 使用 app-route，包含工具栏、导航等。

另一个页面被定义为自定义元素<part-info>。

在零件信息中，我有 vaadin-grid 设置，其中包括用于显示行详细信息的嵌套模板。

行详细信息显示在 Edge 中，但不显示在 Chrome 中。

这与嵌套模板有关，还是我的导入？

【问题讨论】：

可能与您那里的 flex CSS 有关。看看将高度更改为固定值并移除 flex 是否有帮助。
在与样式相关的注释中，我更喜欢将行详细信息保留为自己的元素，使数据绑定更容易，并导致 IMO 看起来更清晰。我在我的一个教程视频中做了一个例子github.com/vaadin/elementary-school-009

【解决方案1】：

您的 HTML 看起来格式不正确。您在 <div> (line 42) 内有一个未关闭的 <template>，然后是杂散的 <div> 和 <template> 标签（从 line 63 开始）。

如果您在 JSBin 首选项中启用 HTMLHint，您将看到以下错误：

~~但你实际上是don't need <template is="dom-bind"> inside a custom element，应该删除。在 Chrome 中试试这个修改后的jsbin。~~ 结果<vaadin-grid> 需要在 Polymer 元素内使用自动绑定模板来生成行详细信息。

【讨论】：

是的，我确实复制了一个额外的 div 关闭它看起来像。里面的额外模板供 Vaadin 网格行详细信息使用。请注意，没有它，单击行时不会显示任何内容。 vaadin.com/docs/-/part/elements/vaadin-grid/details.html
我建议将行详细信息包装在一个单独的组件中，例如：jsbin.com/citagu/2/edit?html,console,output
@Adam，我刚刚在 OS X El Capitan 上的 Chrome 51 中尝试了您的代码，它的行为与 jsbin 完全相同（即行细节看起来很好）。你的环境是什么？
抱歉耽搁了。我在 Win10 上，但在 OS X El Capitan 上得到相同的结果。需要明确的是，该问题并未体现在 jsbin 中。仅当网格在自定义元素（页面）中使用时，来自另一个自定义元素，其中 index.html 非常基本并且只有“”。我在另一个单独的组件中也有行详细信息，行为相同。

【解决方案2】：

我相信我找到了罪魁祸首。 window.Polymer = { dom: 'shadow'};

因此，在这种情况下，Edge 处理 shadow DOM 的能力似乎比 Chrome 更好。或者带有 vaadin 网格的东西使它与 polyfills 一起工作得更好。

Polymer 默认为 shady DOM。以下是有关 shady vs shadow DOM 的更多信息： https://www.polymer-project.org/1.0/blog/shadydom

【讨论】：