querySelector在Polymer 2的Shadow DOM中不起作用

Question

In Polymer 2, Im trying to change a property called urls that is in the shadow DOM. I try to acceess it in var loader . I have tried:

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

But none works. What Im doing wrong?

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

I can see <ami-loader2> in the document here:

Answer 1

If you wish to access an element via an ID you actually have to provide an id :p

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

so then you can access the element with this.$.loader or if you wish you can do this.shadowRoot.querySelector('#loader')

This will give you back the ELEMENT. So you can then use functions/apis this element provides.

But as your are using Data-Binding to actually give some data to this elements it's much easier to actually select this value as the "raw" data. Which would be just this.url .

And you can actually just do this.urls = 'http://my-url.com' and it will be set for this element.

Be sure to properly define data you wish to bind as properties as well and that all your code is within your class.

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

Just as a reference. You would be using the element like this <my-view2 urls="http://my-path.com">...</my-view2>

Following is very specific to your code and my interpretation on what I think you want to do.

if you only wish to set the variable dynamically inside your element and you don't want to actually change it within your ami-loader2. You could remove the reflectToAttribute: true but keep the rest and just use this.urls = 'http://my-path.com' .