polymer - Vaadin Grid Row 详细信息未在 Chrome 中显示

Question

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

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

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

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

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

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

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

Answer 1

您的 HTML 看起来格式不正确。您<template>在 a <div>（第 42 行）内有一个未封闭的内容，然后是流浪<div>和<template>标签（从第 63 行开始）。

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

但是您实际上不需要<template is="dom-bind">在自定义元素中，应该将其删除。在 Chrome 中尝试这个修改后的jsbin。事实证明<vaadin-grid>，Polymer 元素内需要一个自动绑定模板来生成行详细信息。

Answer 2

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

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

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