Nie można wywołaćSelektora w moim komponencie Polymer

Question

Próbuję uzyskać dostęp do części mojego składnika przez querySelector, ale zwraca wartość null.

Moje html w moim komponentu wygląda następująco:

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

powód, dla którego chcesz uzyskać dostęp do tego, to dlatego, że chcę zmienić zajęcia w certains warunkach, gdy użytkownik kliknie się gdzieś w organizmie.

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

querySelector zawsze retun null. Czemu ?

Rozumiem, że shadow dom wybaczy mi dostęp w innym komponencie domowym, ale dlaczego w tym samym komponencie? Jak mogę uzyskać do niego dostęp? A może powinienem przetworzyć inaczej?

Answer 1

Podczas korzystania z querySelector("#my-dropdown") używana jest funkcja najwyższego poziomu querySelector. Ta funkcja wyszukuje w dokumencie głównym, a nie w ShadowDOM elementów polimerowych.

W twoim przypadku powinieneś użyć shadowRoot.querySelector('#my-dropdown') lub $['my-dropdown'] (jest to skrót), aby uzyskać żądany element.