在轻量级 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：访问所有有效儿童的最佳方式是什么？

我已经想出了这个代码，但它是近乎淫秽的......我什至无法看到它而不觉得肚子好笑！

  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"]');

纸张输入的查询与上述类似。