Polymer document.querySelector未按预期工作

Question

要么我做了一些可怕的错误,要么聚合物不喜欢我.见如下:

<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

此问题几乎与使用querySelector查找Polymer模板内的嵌套元素返回null相同.

简短的回答是,聚合物元素模板中的元素被放入该元素的ShadowDOM中,对该元素之外的任何东西都不可见.这样您就可以更轻松地控制样式,并且元素ID具有范围.

您可以为对话框指定id并使用Polymer的自动节点查找,也可以使用this.shadowRoot.querySelector('paper-dialog').