Polymer document.querySelector 未按预期工作
2014-07-09
8545
要么是我做错了什么,要么就是 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
。所以,如果有人能告诉我哪里出了问题,那就太好了!
2个回答
此问题与 使用 querySelector 查找 Polymer 模板内的嵌套元素返回 null 几乎相同。
简而言之,聚合物元素模板中的元素被放入该元素的 ShadowDOM 中,对该元素外部的任何东西都不可见。这样您就可以更轻松地控制样式,并且元素 ID 具有范围。
您可以为对话框指定一个 id 并使用 Polymer 的自动节点查找,也可以使用
this.shadowRoot.querySelector('paper-dialog')
。
dfreedm
2014-07-09
问题是您无法使用
document.querySelector
访问自定义元素内的影子 DOM。
查看我对类似问题的回答
。
Dirk Grappendorf
2014-07-09