在light DOM树上运行选择器并访问它

Running a selector on, and visiting, the light DOM tree

本文关键字：选择器 访问 运行 light DOM      更新时间：2023-09-26

我有一个类似的小部件：

<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!");
      });
    });
  },

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

查询纸张输入类似于上面的操作。

相关文章：