在我的Polymer组件中无法querySelector

Question

我正在尝试通过querySelector访问我的组件的一部分，但它返回null。

我的组件中的html如下所示：

<nav class="mainmenu">
   <div class="container">
       <div class="dropdown" id="my-dropdown">

我想访问它的原因是因为，当用户点击正文中的某个地方时，我想在某些条件下更改类。

void ready(){
 document.body.onClick.listen((E)  {
   if(_isActive){
    querySelector("#my-dropdown");

querySelector始终重新返回null。为什么？

我理解影子dom原谅我在其他dom组件中访问，但为什么在同一个组件中呢？ 我怎样才能访问它？或者我应该采用不同的方式处理？

Answer 1

使用querySelector("#my-dropdown")时，您使用的是顶级函数querySelector。此功能在主文档中搜索，而不是在聚合物元素的ShadowDOM内搜索。

在您的情况下，您应该使用shadowRoot.querySelector('#my-dropdown')或$['my-dropdown']（这是一个快捷方式）来获取您要查询的元素。