Vaadin Grid Row详细信息未在Chrome

Question

JSBin示例： https://jsbin.com/sofura/3/edit?html,output

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

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

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

在part-info中，我有vaadin-grid设置，其中包含一个用于显示行详细信息的嵌套模板。

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

这与嵌套模板或可能是我的导入有关吗？

Answer 1

您的HTML看起来格格不入。您在<template>（line 42）中有一个未公开的<div>，后面是流浪的<div>和<template>标记（从line 63开始）。

如果在JSBin偏好设置中启用HTMLHint，您将看到错误：

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

Answer 2

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

所以在这种情况下，Edge似乎比Chrome更好地处理阴影DOM。或者使用vaadin网格的东西可以更好地使用polyfill。

Polymer默认使用shady DOM。这里有关于shady vs shadow DOM的更多信息： https://www.polymer-project.org/1.0/blog/shadydom