Impossibile querySelector nel mio componente Polymer

Question

Sto tentando di accedere a una parte del mio componente tramite querySelector, ma restituisce null.

mio html nella mia componente si presenta come:

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

Il motivo che voglio per accedere a questo, è perché, voglio cambiare le classi in condizioni certains quando l'utente clicca da qualche parte nel corpo.

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

querySelector restituisce sempre null. Perché ?

Comprendo shadow dom mi perdoni l'accesso in altri dom component, ma perché nello stesso componente? Come posso accedervi? O forse dovrei elaborare in modo diverso?

Answer 1

Quando si utilizza querySelector("#my-dropdown") si utilizza la funzione di livello superiore querySelector. Questa funzione cerca nel documento principale e non all'interno degli ShadowDOM degli elementi polimerici.

Nel tuo caso dovresti usare shadowRoot.querySelector('#my-dropdown') o $['my-dropdown'] (è una scorciatoia) per ottenere l'elemento che stai interrogando.