シャドーなしのカスタム要素DOM：要素を取得する最善の方法

Question

Polymerを使用して、軽いDOM（要素にあるもの）とローカルDOM（物語の「隠れた」側面）の違いをよく理解することを学びました。

<iron-form>（これは<form is="iron-form"></form>のように使用されます）は、ローカルDOMを持たないため、少し異なります。 （特定のボタンの - フォーム内 -

<hot-form-validator success-message="Record saved!"> 
     <form is="iron-form" id="form" method="post" action="/stores/polymer"> 
     <paper-input required id="name" name="name" label="Your name"></paper-input> 
     <paper-input required id="surname" name="surname" label="Your surname"></paper-input> 
     <paper-button type="submit" raised on-click="_submit">Click!</paper-button> 
     </form> 
    </hot-form-validator> 

さて、hot-form-validatorニーズを見て、フォームを取得し、する：

は、今私はあなたが行くカスタムメイドのウィジェット（which is actually available in GitHub）を持っていますtype=submit）。それは作品

attached: function(){ 
    var paperButton = this.form.$$('paper-button[type=submit]'); 
    ... 
} 

、それは紙のボタンが実際にあるのに対し$$は、地元のDOMのためだけでなければなりませんので、それがないという意味がありません： （this.formがフォームであることを覚えておいてください）：だから、私は持っていますフォームの軽いDOMで

attached: function(){ 
    var paperButton = this.form.queryEffectiveChildren('paper-button[type=submit]'); 

これは機能しますが、これが最善の方法かどうかは疑問です。

...シャドーDOMがないので、このすべてについて心配する必要はありません。扱うライト/ローカルDOMがないため、単にDOMを使用してください。

Answer 1

あなたは<content id="someId"></content>にidを追加した場合、あなたは

var result = this.getContentChildren('#someId'); 

を使用して、その結果で目的の要素を検索することができますhttps://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

を参照してください。

<dom-module ...> 
    <template> 
    ... 
    <content></content> 
    <content id="submitButton" select="paper-button[type=submit]"></content> 
    ... 
    </template> 
</dom-module> 

のようにボタンを提出して、このコードは

this.form.$$('paper-button[type=submit]'); 

ために働いている

var submitButton = this.getContentChildren('#submitButton')[0]; 

を使用して要素を取得するためにあなたは、たとえば、特定の<content>タグを作成することができますthis.$$はに転送されますと陰影DOMカプセル化でちょうどエミュレートされ、querySelectorAll(...)がローカルのDOMの子供よりも他の子供を見つけるのを妨げません。

あなたはまた、あなたがrigthだ

var submitButton = Polymer.dom(this).querySelector('paper-button[type=submit]');