Polymer document.querySelector not working as expected
polymer
Solution
This question is nearly identical to Using querySelector to find nested elements inside a Polymer template returns null.
The short answer is that elements in a polymer-element's template are put into the ShadowDOM of that element, are not not visible to the anything outside of that element. This is so that you can control styling more easily, and element IDs are scoped.
You can either give the dialog an id and use Polymer's automatic node finding, or use `this.shadowRoot.querySelector('paper-dialog')`.
Problem
Either I am doing something horribly wrong or Polymer just doesn't like me. See following: ``` <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 my reasons to use `querySelector`. So, if someone can tell me whats going wrong that will be great!