javascript - 在轻量 DOM 树上运行选择器并访问它

Question

我有一个像这样的小部件:

<link rel="import" href="../polymer/polymer.html">

<dom-module id="hot-network">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <content id="content"></content>

  </template>

  <script>
    Polymer({

      is: 'hot-network',

      attached: function(){
        var form = this.queryEffectiveChildren( 'iron-form');
        var paperInput = this.queryEffectiveChildren( 'paper-input');

        console.log("WIDGETS:", ironAjaxWidgets );
    },


    });
  </script>
</dom-module>

我想像这样使用这个小部件:

<dom-module id="my-view2">

  <template>

    <hot-network>
      <div>
        <form is="iron-form" id="form" on-iron-form-response="_response" method="PUT" action="/stores/polymer">
          <paper-input required id="name" name="name" label="Your name"></paper-input>
          <paper-button raised type="submit">Click!</paper-button>
        </form>
      </div>
    </hot-network>
  </template>

  <script>


    Polymer({
      is: 'my-view2',
      _response: function(){
        console.log("AH!");
      }
    });
  </script>

</dom-module>

问题 1:如何在 light DOM 中查找元素(使用选择器)？

这两个调用实际上不起作用:

var form = this.queryEffectiveChildren( 'iron-form');
var paperInput = this.queryEffectiveChildren( 'paper-input');

因为他们只在有效子级的“第一级”上运行选择器。

如果我需要在分布式内容中查找小部件(对于组合很重要)，我怎样才能可靠地做到这一点？

问题 2:拜访所有高效 child 的最佳方式是什么？

我已经想出了这段代码，但它近乎淫秽......我什至无法看着它而不感到胃部滑稽!

  attached: function(){
    this.async( function(){


      function inspect( e ){
        console.log("INSPECTING", e );
      }

      this.getEffectiveChildren().forEach( (effectiveChild) => {
        console.log("Effective child found.");
        inspect( effectiveChild );
        console.log("Getting into all children of it...");
        var foundChildren = effectiveChild.getElementsByTagName("*");
        for( var i = 0, l = foundChildren.length; i < l; i ++ ){
          var child = foundChildren[ i ];
          inspect( child );
        };
        console.log("All children inspected!");
      });

    });
  },

Answer 1

问题 1:

var form = Polymer.dom(this.root).querySelector('#form');
// or
var form = this.$$('#form');
// or if you wanna use tags/attributes
var form = Polymer.dom(this.root).querySelector('form[is="iron-form"]');

查询paper-input与上面类似。