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

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

但是 none 有效。我做错了什么？

<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 还给您。所以你可以使用functions/apis这个元素提供的

但是当您使用数据绑定实际为这个元素提供一些数据时，实际上 select 这个值作为 "raw" 数据要容易得多。这只是 this.url.

你实际上可以只做 this.urls = 'http://my-url.com' 它会被设置为这个元素。

请务必正确定义您希望绑定为属性的数据，并且所有代码都在您的 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>

仅供参考。你会像这样使用元素 <my-view2 urls="http://my-path.com">...</my-view2>

以下内容非常针对您的代码以及我对您想要执行的操作的解释。

如果您只想在元素内动态设置变量，而不想在 ami-loader2 中实际更改它。您可以删除 reflectToAttribute: true 但保留其余部分并仅使用 this.urls = 'http://my-path.com'.

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

querySelector not working in Shadow DOM in Polymer 2

javascript

css-selectors

polymer-2.x