聚合物重复模板问题答案

【问题标题】：Polymer repeating template issues聚合物重复模板问题
【发布时间】：2015-08-15 06:14:26
【问题描述】：

抱歉标题含糊不清，我不知道如何表达我的意思。

背景：我正在为我的公司制作一个单页应用程序，我正在使用聚合物 0.56 构建，并且正在尝试升级到 1.0。

问题：将内容（干净的 HTML）克隆到我的主“视图”div 中时，一些聚合物元素（按钮）反复嵌套，导致显示 UI 错误：

生成的代码：

这仅在我 .clone() 内容或使用 .innerHTML 将其复制到视图 div 时发生。例如

mainDiv.append($(cleanHTML).clone());

奇怪的是，使用以下内容时不会出现此问题：

mainDiv.append(cleanHTML);

这给出了：

在我添加任何内容之前，总是清理主 div。如果可能的话，我想避免直接使用对象 cleanHTML（因此我为什么要尝试 .clone()）有人知道是什么原因造成的吗？

【问题讨论】：

我有一种模糊的预感，这可能与 Polymer 如何抽象 DOM 有关。我建议您提供更完整的源代码（JS 和 HTML）的 sn-p，以阐明 cleanHTML 和 mainDiv 的作用，并提供更好的上下文。
在使用聚合物时不使用 clone() 来渲染内容是相当安全的。也许您正在尝试实现的示例会有所帮助。

【解决方案1】：

试试这个：

  <paper-button>
  <iron-icon icon="favorite"></iron-icon>
  Logout
  </paper-button>

是的，如果 CSS 冲突，聚合物确实会重叠，所以我更喜欢使用可以修改的自定义按钮

【讨论】：