Document.querySelector polymer is not working properly

Question

Either I'm doing something terribly, or Polymer just doesn't like me. See below:

<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>

Now I have reasons to use querySelector. So, if someone can tell me what will be wrong, it will be great!

Answer 1

This question is almost identical. Using querySelector to search for nested elements inside a Polymer template returns null .

The short answer is that the elements in the template of the polymer element are placed in the ShadowDOM of this element, they are not visible to anything outside this element. This allows you to more easily control the style, and element identifiers are limited.

, node Polymer, this.shadowRoot.querySelector('paper-dialog').

Answer 2

, DOM document.querySelector. . .