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

Question

在 Polymer 2 中，我尝试更改名为 urls 的属性那是在影子 DOM 中。我尝试在 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')

但是没有一个有效。我做错了什么？

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

我可以看到<ami-loader2>在此处的文档中:

Answer 1

如果您希望通过 ID 访问元素，您实际上必须提供一个 id :p

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

这样你就可以使用 this.$.loader 访问该元素或者如果您愿意，您可以这样做this.shadowRoot.querySelector('#loader')

这将为您返回 ELEMENT。这样您就可以使用该元素提供的函数/api。

但是，当您使用数据绑定(bind)实际上为该元素提供一些数据时，实际上选择该值作为“原始”数据要容易得多。这就是 this.url .

你实际上可以这样做this.urls = 'http://my-url.com'并将为此元素设置它。

请务必正确定义您希望绑定(bind)为属性的数据，并且所有代码都在您的类中。

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