当由 XHR 加载时，聚合物元素不起作用

Question

我正在尝试使用 XHR 加载文档，并将一些加载的节点移动到主文档中。问题是 Polymer 元素定义在加载文件 "don't work" 后移动。它们的外观和行为都像普通的 <div>s.

这是一个简单的复现案例。

已加载文档：

<!-- insert.html -->
<div>
  <link rel="import" href="paper-button/paper-button.html">
  <div>Hello, world!</div>
  <paper-button>I am a button</paper-button>
</div>

主页：

<!-- index.html -->
<html>
<head>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="core-ajax/core-ajax.html">
<script>

window.addEventListener('polymer-ready', function() {
  var ajax = document.getElementById('ajax');
  ajax.addEventListener('core-response', function(e) {
    var insertTo = document.getElementById('insertion-point');
    insertTo.appendChild(e.detail.response.body.children[0]);
  });
  ajax.go();
});

</script>
</head>
<body>
  <core-ajax id="ajax" url="insert.html" handleAs="document"></core-ajax>
  <div id="insertion-point"> </div>
</body>
</html>

加载后，我看到 #insertion-point 包含已加载的文档，正如预期的那样，但 <paper-button> 没有运行，看起来像 <div>I am a button</div>。

当我将 <link rel="import" href="paper-button/paper-button.html"> 添加到主页的 <head> 时，情况并没有好转。

用原生 XMLHttpRequest 替换 <core-ajax> 也无济于事。

我正在使用最新的 Polymer 在 Google Chrome 42 上进行测试。

我的问题：这应该有效吗？如果不是，为什么？如果是，那该怪谁呢？

Answer 1

x-posting 来自 Elliott Sprehn's response the polymer-dev mailing list.

This doesn't work because you're taking elements from an xhr document where there's no custom element registry and then just moving them. You need to do appendChild(document.importNode(response.body.children[0])) which will create a clone of the node, but using the document where polymer has registered the custom elements.

当由 XHR 加载时，聚合物元素不起作用

Polymer elements don't work, when loaded by XHR

ajax

polymer