Không thể querySelector trong thành phần Polymer của tôi

Question

Tôi đang cố truy cập vào một phần của thành phần của mình bằng querySelector, nhưng nó trả về giá trị rỗng.

html của tôi trong thành phần của tôi trông giống như:

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

Lý do tôi muốn truy cập này, là bởi vì, tôi muốn thay đổi các lớp học trong điều kiện certains khi người dùng nhấp chuột đâu đó trong cơ thể.

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

querySelector luôn luôn giữ lại giá trị rỗng. Tại sao ?

Tôi hiểu bóng dom tha thứ cho tôi để truy cập vào thành phần dom khác, nhưng tại sao trong cùng một thành phần? Tôi có thể truy cập vào nó bằng cách nào? Hoặc có lẽ tôi nên xử lý khác nhau?

Answer 1

Khi bạn sử dụng querySelector("#my-dropdown") bạn đang sử dụng chức năng cấp cao nhất querySelector. Chức năng này tìm kiếm trong tài liệu chính chứ không phải bên trong các ShadowDOM của các phần tử polymer.

Trong trường hợp của bạn, bạn nên sử dụng shadowRoot.querySelector('#my-dropdown') hoặc $['my-dropdown'] (đó là lối tắt) để lấy phần tử bạn đang truy vấn.