Cannot querySelector in my Polymer component

Question

I'm trying to access to a part of my component by querySelector, but it return null.

My html in my component looks like :

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

The reason I want to access this, is because, I want to change classes in certains conditions when user click somewhere in body.

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

the querySelector always retun null. Why ?

I understand shadow dom forgive me to access in other dom component, but why in the same component ? How can I access to it ? Or maybe I should process differently ?

Answer 1

When you use querySelector("#my-dropdown") you are using the top level function querySelector. This function search in the main document and not inside the ShadowDOMs of the polymer elements.

In your case you should use shadowRoot.querySelector('#my-dropdown') or $['my-dropdown'] (it's a shortcut) to get the element you are querying.