AJAX Load Polymer Element и запустить его методы

Question

Вот моя ситуация: у меня есть оболочка приложения и есть классы контроллеров для загрузки шаблонов, в которых есть пользовательские полимерные элементы. Пока я загружаю шаблон и добавляю в DOM, и все работает отлично для первого взгляда.

После добавления содержимого шаблона в DOM я пытаюсь получить доступ к методам пользовательских элементов, но я не смог получить к нему доступ. Если я попытаюсь отладить код и выполнить важные шаги в консоли, то я могу получить доступ к методам элементов.

Мой Элемент:

<link rel="import" href="../../components/polymer/polymer.html" /> 
<dom-module is="app-login"> 
<template> 
    <style> 
     :host { display: block; } 
     :host.hide { display: none; } 
    </style> 
    <div> samle content </div> 
</template> 
<script> 
Polymer({ 
    is: 'app-login', 
    run: function() { 
     return new Promise(function(resolve, reject) { 
      resolve({'id':0,'name':'user'}); 
     }); 
    }, 
    close: function() { 
     this.classList.add('hide'); 
    } 
}); 
</script> 
</dom-module> 

Моя программа:

// [...] 
// this works fine, I just add for better understanding 
getTemplate(templateName) { 
    return new Promise(function(resolve, reject) 
    { 
     fetch('templates/'+templateName+'.html').then(response => { 
      document.getElementById('templates').innerHTML += response.text(); 
      resolve(response); 
     }).catch(error => { reject(error); }); 
    }); 
}; 
// [...] 
// this method called by the main program and cant't access to the element methods 
doLogin() { 
    this.getTemplate('login').then(templateResponse => { 
     let Login = document.querySelector('app-login'); // <app-login>...</app-login> 
     Login.run(); // TypeError: Login.run is not a function 
    }); 
}; 
// [...] 

шаблоны/login.html:

<link rel="import" href="elements/app-login/app-login.html" /> 
<app-login></app-login> 

Консоль отладки:

let Login = document.querySelector('app-login'); 
//Return: <app-login>...</app-login> 
Login.run(); 
//Return: Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 

Я пытался искать это, но я не мог найти соответствующий ответ еще, кто-то решил эту проблему в некотором роде раньше?

Уже пробовало:

• SetTimeout после добавления элемента в DOM »такой же результат
• добавления _ к имени методы (как методы бумажных элементов)» такой же результат
• ждет WebComponentsReady события после вставки элемента в событие DOM »не запускается программа остановлена ​​

Answer 1

После копания в теме и просить о помощи в группе poly-dev на google; Карл Тидт (@ktiedt) решил мою проблему:

Решение было использовать импорт importHref и dom(). AppendChild вместо простого responseText присоединяется к элементу контейнера. Методы не были доступны, поскольку синтаксический анализ элементов различен, и я уверен, что javascript не может получить доступ к элементу shadowDOM, если вы добавите текст HTML в innerHTML контейнера.

Я изменил метод getTemplate, чтобы использовать импорт importHref и добавить контейнер с помощью Polymer.dom(). AppendChild.

Информация об использовании importHref:
https://www.polymer-project.org/1.0/docs/devguide/instance-methods#imports-and-urls

getTemplate(templateName) 
{ 
    let templateFile = this.baseURL+'templates/'+templateName+'.html'; 

    return new Promise(function(resolve, reject) 
    { 
     let templateRequest = Polymer.Base.importHref(templateFile, 
     function() 
     { 
      Polymer.dom(document.getElementById('templates')) 
        .appendChild(templateRequest.import.body); 

      resolve(templateRequest); 
     }, 
     function(error) 
     { 
      reject(error); 
     }); 
    }); 
};