Wie Elemente eines Elements DOM querySelector Polymer mit

Question

Ich habe mein Element:

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

und ich verwende es wie

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

in meinem Imperativ Teil:

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 ? */ 
    } 
}); 

Ist ist es möglich, das unter Verwendung von Polymer eingebauten zu tun? Oder sollte ich die Standard-DOM-API verwenden?

Answer 1

Polymer hat nicht bietet eine Hilfsfunktion oder Abstraktion, die Knoten auflistet sowohl von dem Licht und lokalen Dom. Wenn Sie diese Funktionalität benötigen, können Sie this.querySelector(selector) verwenden.

Neben der Polymer.dom(this.root).querySelectorAll(selector) Methode bietet Polymer auch die $$-Dienstprogrammfunktion, die beim Zugreifen auf Mitglieder des lokalen DOM eines Elements hilft. Diese Funktion wird wie folgt verwendet:

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

anzumerken, dass, im Gegensatz zu querySelectorAll die $$ Funktion gibt nur ein Element: das erste Element in dem lokalen DOM, die die Wähler übereinstimmt.