聚合物升级后，当加载为 HTML 导入时，纸张复选框创建两次

Question

问题

我将聚合物从 0.5 升级到 1.5，并且纸质复选框现在出现两次。

进度

我尝试了运行 polyup 并完成了整个 polymer 升级指南，但是 none 的程序解决了这个问题。我确实发现了两件事：

1.

正常工作时 html 看起来像

paper-checkbox
  checkboxContainer
  checkboxLabel

我发现我的情况看起来像

paper-checkbox
  checkboxContainer
  checkboxLabel
    checkboxContainer
    checkboxLabel

这让我相信聚合物正在处理纸质复选框两次。但是，我仔细检查了一下，我没有多次加载纸张-checkbox.html，这是我在这方面唯一的想法。

2.

主要内容在飞入中，其部分作为 html 导入加载。我发现导入的 html 中的纸质复选框表现出这种行为，但如果我将纸质复选框硬编码到飞入中，它会正常工作。

问题

什么会导致聚合物尝试处理纸质复选框两次？ html 进口会导致这种情况吗？

编辑：

应 Tony 的要求转储代码。

default.html

<head>
    <title>Title</title>
    <meta charset="utf-8" />
    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="styles//font-awesome.css?ver=v2.3.2-22-g83c2652" />
    <link rel="stylesheet" type="text/css" href="scripts/jquery-ui/jquery-ui.min.css?ver=v2.3.2-22-g83c2652" />
    <link rel="stylesheet" type="text/css" href="styles/main.css?ver=v2.3.2-22-g83c2652" shim-shadowdom />
    <!-- favicon -->
    <link rel="icon" type="image/ico" href="img/favicon.ico" />

    <!-- HTML Imports -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
    <link rel="import" id="doc_nav" href="page/nav.html" onerror="handleError(event)">
    <link rel="import" id="order_billing" href="page/billing.html" onerror="handleError(event)">
    <link rel="import" id="order_submit" href="page/certify.html" onerror="handleError(event)">
</head>
<body>
  // Some generic html then this, the section the imports are added to
  <article class="fly-in transition-out">
  </article>

  // The relevant script
  <script type="text/javascript">
    // when imports are loaded, render starting page
    window.addEventListener('HTMLImportsLoaded', function () {
      init();
    });
  </script>
</body>

import.js相关函数

// render all the pages of order type to the DOM then hide them
function renderOrderPages(){
    var pages = document.querySelectorAll("link[id^='order_']");
    var article = document.querySelector("article");

    for (var i = 0; i < pages.length; ++i) {
        var pg_content = pages[i].import;
        var pg_section = pg_content.querySelector('section');
        pg_section.style.display = "none";
        article.appendChild(pg_section.cloneNode(true));
        bind_page_events(pg_section.id);
    }
}

Answer 1

如您所见，深度节点克隆 (cloneNode(true) 无法正确处理 Polymer 1.x 中 <paper-checkbox> 的模板（包含在 <dom-module> 中)，而它以前在 Polymer 0.5 中没有问题（容器是 <polymer-element>）。

虽然我无法肯定地解释为什么 cloneNode(true) 在 Polymer 1.x 中复制 paper-checkbox 的模板，但我可以提供一个替代方案：

将<section>改为<template>, and cloneNode() to importNode():

for (var i = 0; i < pages.length; ++i) {
    var pg_content = pages[i].import;
    var template = pg_content.querySelector('template');
    var node = document.importNode(template.content, true);
    article.appendChild(node);
}

plunker

聚合物升级后，当加载为 HTML 导入时，纸张复选框创建两次

After polymer upgrade paper-checkboxes are created twice when loaded as HTML import

html

javascript

polymer

paper-elements

html-imports

问题

进度

1.

2.

问题

编辑：