Làm thế nào để querySelector yếu tố của DOM của một nguyên tố bằng Polymer

Question

Tôi có yếu tố của tôi:

<dom-module id="x-el"> 
    <p class="special-paragraph">first paragraph</p> 
    <content></content> 
</dom-module> 

và tôi sử dụng nó như

<x-el> 
    <p class="special-paragraph">second paragraph</p> 
</x-el> 

một phần bắt buộc của tôi:

Polymer({ 
    is: 'x-el', 

    ready: function() { 
    /* this will select all .special-paragraph in the light DOM 
     e.g. 'second paragraph' */ 
    Polymer.dom(this).querySelectorAll('.special-paragraph'); 

    /* this will select all .special-paragraph in the local DOM 
     e.g. 'first paragraph' */ 
    Polymer.dom(this.root).querySelectorAll('.special-paragraph'); 

    /* how can I select all .special-paragraph in both light DOM and 
     local DOM ? */ 
    } 
}); 

Is có thể làm điều đó bằng cách sử dụng tích hợp sẵn của Polymer không? Hoặc tôi có nên sử dụng api DOM mặc định không?

Answer 1

Polymer làm không cung cấp chức năng trợ giúp hoặc trừu tượng sẽ liệt kê các nút cả từ ánh sáng và các DOM cục bộ.

Nếu bạn yêu cầu chức năng này, bạn có thể sử dụng this.querySelector(selector).

Một lưu ý phụ, ngoài phương thức Polymer.dom(this.root).querySelectorAll(selector), Polymer cũng cung cấp chức năng tiện ích $$ giúp truy cập các thành viên DOM cục bộ của phần tử. Chức năng này được sử dụng như sau:

<dom-module id="my-element"> 
    <template> 
    <p class="special-paragraph">...</p> 
    <content></content> 
    </template> 
</dom-module> 

<script> 
    Polymer({ 
    is: 'my-element', 
    ready: { 
     this.$$('.special-paragraph'); // Will return the <p> in the local DOM 
    } 
    }); 
</script> 

Lưu ý rằng, không giống như querySelectorAll, các $$ chức năng chỉ trả một phần tử: đường phần tử đầu tiên trong DOM địa phương phù hợp với selector.