ポリマー2の陰影DOMでquerySelectorが機能しない

Question

ポリマー2では、陰影DOMにあるurlsというプロパティを変更しようとしています。私はvar loaderにそれを覚えようとします。私は試しました：

var loader = document.querySelector('#urls'); 
var loader = this.shadowRoot.querySelector('#urls'); 
var loader = Polymer.dom(this).querySelector('#urls'); 
var loader = this.$.urls; 
var loader = this.$$.urls; 
var loader = Polymer.dom(this.root).querySelector('#urls') 

しかし、何も動作しません。何が間違っている？私はここに文書で<ami-loader2>を見ることができます

<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="shared-styles.html"> 
<link rel="import" href="ami-loader2.html"> 

<dom-module id="my-view2"> 
    <template is="dom-bind" id="urls"> 
    <style include="shared-styles"> 
     :host { 
     display: block; 
     padding: 10px; 
     } 
    </style> 

    <ami-loader2 urls="[[urls]]"></ami-loader2> 
    </template> 

    <script> 
    class MyView2 extends Polymer.Element { 
     static get is() { return 'my-view2'; } 
    } 

    window.customElements.define(MyView2.is, MyView2); 

    var t2 = ['36444280', '36444294', '36444308', '36444322', '36444336']; 
    var urlsstring = t2.map(function(v) { 

     return 'https://cdn.rawgit.com/FNNDSC/data/master/dicom/adi_brain/' + v; 

    }); 

    //var loader = document.querySelector('#urls'); 
    //var loader = this.shadowRoot.querySelector('#urls') 
    //var loader = Polymer.dom(this).querySelector('#urls') 
    var loader = this.$.urls 

    loader.urls = urlsstring; 

    </script> 
</dom-module> 

：

Answer 1

あなたが実際にIDを提供する必要がIDを経由して要素にアクセスする場合：P

<ami-loader2 id="loader" urls="[[urls]]"></ami-loader2>

そうすれば、this.$.loaderで要素にアクセスすることができます。できる場合はthis.shadowRoot.querySelector('#loader')

これはあなたに要素を返すでしょう。したがって、この要素が提供する関数/ apiを使用することができます。

実際にデータバインディングを使用してこの要素にデータを与えているので、実際にこの値を「生の」データとして選択する方がはるかに簡単です。これはちょうどthis.urlになります。

実際にはthis.urls = 'http://my-url.com'を実行するだけで、この要素に設定されます。

プロパティとしてバインドするデータを適切に定義し、すべてのコードがクラス内にあることを確認してください。

<script> 
class MyView2 extends Polymer.Element { 

    static get is() { return 'my-view2'; } 

    static get properties() { 
     return { 
      urls: { 
       type: String, 
       reflectToAttribute: true 
      } 
     }; 
    } 

    connectedCallback() { 
     super.connectedCallback(); 
     // your code 
    } 

} 

customElements.define(MyView2.is, MyView2); 
</script> 

参考のために。あなたはこのような要素を使用するでしょう <my-view2 urls="http://my-path.com">...</my-view2>

以下は、あなたのコードと私があなたがしたいと思うものに関する私の解釈に非常に特有です。

要素内で変数を動的に設定し、ami-loader2内で変数を実際に変更したくない場合は、 reflectToAttribute: trueを削除して残りの部分を残し、this.urls = 'http://my-path.com'を使用してください。