특정 블록 내부에 자식 요소를 렌더링합니다.

Question

내 사용자 지정 폴리머 구성 요소 내부의 특정 블록에 하위 요소를 어떻게 렌더링 할 수 있을지 궁금합니다.

<my-custom> 
    <div>stuff to render</div> 
</my-custom> 

내 사용자 지정 구성 요소의 선언 : 위의 코드를 사용하여

<polymer-element name="my-custom" noscript> 
    <template> 
     <div id="stuffToRenderWrapper"> 
      <content /> 
     </div> 
    </template> 
</polymer-element> 

, 내 DOM은 다음과 같이 보입니다 예컨대

이 내 사용자 지정 구성 요소의 사용이다.

<div>Stuff to render</div> 
<div id="stuffToRenderWrapper"></div> 

잘 ID : stuffToRenderWrapper는 그림자 DOM과 사업부 내부 : 물건 렌더링 할 수 없습니다. 여기서 질문은 래퍼 내부에서 렌더링 할 내용을 어떻게 렌더링 할 것인가입니다.

Answer 1

자기 폐쇄 <content> 요소를 사용할 수 있다고 생각하지 않습니다.

이 작동합니다 :

<polymer-element name="x-foo" noscript> 
    <template> 
    <style> 
     #stuffToRender ::content h1 { 
     color: red; 
     } 
     #stuffToRender ::content h2 { 
     color: blue; 
     } 
    </style> 
    <div id="stuffToRender"> 
     <content></content> 
    </div> 
    </template> 
</polymer-element> 

<x-foo> 
    <h1>I am an h1</h1> 
    <h2>I am an h2</h2> 
</x-foo> 

은