Polymer document.querySelector 未按预期工作答案

【问题标题】：Polymer document.querySelector not working as expectedPolymer document.querySelector 未按预期工作
【发布时间】：2014-07-09 05:39:45
【问题描述】：

要么我做错了什么，要么 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。所以，如果有人能告诉我出了什么问题，那就太好了！

【问题讨论】：

Polymer element querySelector is null for nested elements in template 的可能重复项

标签： polymer

【解决方案1】：

此问题与Using querySelector to find nested elements inside a Polymer template returns null 几乎相同。

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

您可以给对话框一个 id 并使用 Polymer 的自动节点查找，或者使用this.shadowRoot.querySelector('paper-dialog')。

【讨论】：

【解决方案2】：

问题是您无法使用document.querySelector 访问自定义元素内的影子DOM。 See my answer to a similar question.

【讨论】：