Question

我正在尝试使用XHR加载文档，并将一些加载的节点移动到主文档中。问题是加载的文档中定义的Polymer元素在移动后“不起作用”。它们的外观和行为与常规<div>相似。

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

加载文件：

<!-- 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

来自Elliott Sprehn's response the polymer-dev mailing list的x-post。

这不起作用，因为您从xhr文档中获取元素，其中没有自定义元素注册表，然后只是移动它们。您需要执行appendChild（document.importNode（response.body.children [0]）），它将创建节点的克隆，但使用聚合物已注册自定义元素的文档。

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

1 个答案: