Как querySelector элементы DOM элемента, используя полимер

Question

У меня есть элемент:

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

и я использую его как

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

в моей настоятельной части:

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 это можно сделать с помощью встроенных в Polymer? Или мне следует использовать DOM по умолчанию?

Answer 1

Полимер делает не обеспечивают вспомогательную функцию или абстракцию, которая перечислит узлы как из легких и местных заморских.

Если вам нужна эта функциональность, вы можете использовать this.querySelector(selector).

На стороне примечания, кроме метода Polymer.dom(this.root).querySelectorAll(selector), Polymer также предоставляет функцию полезности $$, которая помогает в доступе к членам локальной DOM элемента. Эта функция используется следующим образом:

<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> 

Обратите внимание, что, в отличии от querySelectorAll, функция $$ возвращает только один элемент: с первым элементом в локальном DOM, который соответствует селектору.