Polymer HTML을 사용자 정의 요소로 가져 오기

Question

안녕하세요 저는 Webcomponents로 시작했고 약간의 HTML 가져 오기 예제를 만들었습니다. 여기서는 VanillaJs가있는 다른 웹 사이트에서 calander를 가져오고 perfekt를 사용합니다.

2. 단계에서 나는 HTML 요소를 Polymer 요소로 가져 와서 요소를 반복해서 사용할 수 있도록했습니다. 가져 오기 (testsite.com에서 자원이로드) 일 것을, 나는 사용자 정의 요소를 사용하고 내가 볼 수있는 다른 HTML 문서에서

<link rel="import" href="http://www.testsite.com"> 
<link rel="import" href="bower_components/polymer/polymer.html"> 

<polymer-element name="event-calendar-element"> 
    <template> 
     <div id="container" style = "width:220px;"></div> 
    </template> 

      <script> 
       var owner = document._currentScript.ownerDocument; 
       var link = owner.querySelector('link[rel="import"]'); 
       var content = link.import; 
       var container = document.getElementById('container'); 

       var el = content.querySelector('.slider-teaser-column'); 

       container.appendChild(el.cloneNode(true)); 
      </script> 

</polymer-element> 

,하지만 내 폴리머 요소는 더 shadowDOM이 없습니다 - : 여기 내 코드입니다 가져온 선택된 요소에 추가되지 않습니다 내 <event-calendar-element> :/

컨테이너 <div>가 null 따라서 다음과 같은 오류가 발생합니다 : 어떤 도움을 주시면 감사 Cannot read property 'appendChild' of null

)

Answer 1

<div>은 <template> 안에 있으며 Polymer()을 사용하지 않으므로 template.content.querySelector()을 사용하고 내용을 수정해야합니다. 대신 Polymer에서이 작업을 수행 할 수 있습니다.

<link rel="import" href="http://www.testsite.com" id="fromsite"> 
<link rel="import" href="bower_components/polymer/polymer.html"> 

<polymer-element name="event-calendar-element"> 
<template> 
    <div id="container" style="width:220px;"></div> 
</template> 
<script> 
(function() 
    var owner = document._currentScript.ownerDocument; 

    Polymer({ 
    ready: function() { 
     var content = owner.querySelector('link#fromsite').import; 

     var el = content.querySelector('.slider-teaser-column'); 

     this.$.container.appendChild(el.cloneNode(true)); 
    } 
    }); 

})(); 
</script> 
</polymer-element>