Я пытаюсь загрузить документ с XHR и перенести некоторые загруженные узлы в основной документ. Проблема в том, что после перемещения элементы, определенные в загруженном документе, «не работают». Они выглядят и ведут себя как обычные <div> s.Полимерные элементы не работают при загрузке XHR
Вот простой пример воспроизведения.
Loaded документ:
<!-- 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>.
Замена <core-ajax> с собственным XMLHttpRequest также не помогает.
Я тестирую Google Chrome 42 с новейшим Polymer.
Мой вопрос: это должно работать вообще? Если нет, то почему? Если да, кто виноват?