폴리머에 자체 주입 요소를 만드는 가장 좋은 방법은 무엇입니까?

Question

다른 요소 템플릿 코드를 변경할 필요없이 다른 요소의 템플릿에 자신을 삽입하는 요소를 가장 잘 만드는 방법을 찾으려고합니다. 예 :

<core-scaffold> 
    <core-header-panel navigation="" flex=""> 
    <core-toolbar id="navheader"> 
     <span>Menu</span> 
    </core-toolbar> 
    <core-menu> 
     <core-item label="One" horizontal="" center="" layout="" class=""></core-item> 
     <core-item label="Two" horizontal="" center="" layout="" class="core-selected" active=""></core-item> 
    </core-menu> 
    </core-header-panel> 

    <span tool="">Title</span> 

    <div id="content"><p>If drawer is hidden, press button to display drawer.</p></div> 
</core-scaffold> 

이 중합체 프로젝트 표준 코드 골격 예이다. div #content 요소 뒤에있는 <core-scaffold> 템플릿에 해당 요소를 가져 와서 폴리머 요소를 추가하고 싶습니다. 내가 할 않습니다 기존 요소 코드를 전혀 변경하려면 원하는, 새 요소를 올바른 위치에 자체 주입해야합니다.

그 목표를 달성하는 가장 좋은 방법은 무엇입니까?

Answer 1

자체를 삽입하는 요소를 정의 할 때 의도 된 위치를 검색하고 그곳으로 이동하는 첨부 된 함수를 제공하십시오.

간단한 예 (running demo)는 :

<style> 
    #content { 
    background-color: rgb(226, 226, 252); 
    } 
</style> 
<div id="content"> 

</div> 

<polymer-element name="self-injector"> 
    <template>I'm the self-injector!</template> 
    <script> 
    Polymer('self-injector', { 
     attached: function() { 
     document.querySelector('#content').appendChild(this); 
     } 
    }) 
    </script> 
</polymer-element> 

<self-injector></self-injector> 

여기에 유일한 끈적 개찰구는에 주입 할 위치를 찾는 방법입니다. (예를 들어, 페이지에 코어 스캐 폴드가 하나만 있다고 가정하거나 주사 요소가 가장 가까운 요소를 찾은 경우 등). 대부분은 당신과 당신의 사용 사례에 달려 있습니다. 당신이 거기에서 알아야 할 유일한 것은 그림자 dom을 질의하는 방법입니다. This article은 필요한 선택자 인 ::shadow과 /deep/을 사용합니다.