폴리머 document.querySelector가 예상대로 작동하지 않습니다.

Question

무언가 잘못하고 있거나 Polymer가 저를 좋아하지 않습니다. 다음을 참조하십시오 :

<polymer-element name="menu-paper-ui" noscript> 
<template> 
    <paper-dialog heading="Dialog" transition="paper-dialog-transition-bottom"> 
    [ .. ] 
    </paper-dialog> 
    <paper-button label="Dialog Bottom" on-tap="{{toggleDialog}}"></paper-button> 

</template> 
<script> 
    Polymer('menu-paper-ui', { 
    toggleDialog : function() { 
     var dialog = document.querySelector('paper-dialog'); 
     console.log(dialog); //returns null 
     dialog.toggle(); 
    } 
    }) 

</script> 
</polymer-element> 

지금, querySelector을 사용해야하는 이유가 있습니다. 그래서 누군가가 나에게 무엇이 잘못 될지 말할 수 있다면 그것은 위대 할 것입니다!

Answer 1

이 질문은 Using querySelector to find nested elements inside a Polymer template returns null과 거의 같습니다.

간단히 말해서 폴리머 요소의 템플릿에있는 요소는 해당 요소의 ShadowDOM에 배치되고 해당 요소의 외부에는 보이지 않습니다. 이것은 스타일링을보다 쉽게 ​​제어 할 수 있고 요소 ID의 범위가 정해 지도록하기위한 것입니다.

대화 상자에 ID를 지정하고 Polymer의 자동 노드 찾기를 사용하거나 this.shadowRoot.querySelector('paper-dialog')을 사용할 수 있습니다.

Answer 2

document.querySelector이있는 사용자 정의 요소 내부의 그림자 DOM에 액세스 할 수 없다는 문제점이 있습니다. See my answer to a similar question.