Polymer 2의 shadow DOM에서 querySelector가 작동하지 않습니다.

Question

Polymer 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' 만 사용하면됩니다.