Question

我正在尝试查询自定义元素的子元素，该元素使用内容标记作为其子元素的注入点。

<dom-module id="content-element">
  <template>

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

  </template>
  <script>
    Polymer({

      [...],

      attached: function() {
        console.log(this.queryAllEffectiveChildren('div'));

        // console.log(this.children);
      }
    });
  </script>
</dom-module>

其父级生成一个合适的元素，然后将其附加到content-element。

<dom-module id="parent-element">
  <template>

    <content-element></content-element>

  </template>
  <script>
    Polymer({

      [...],

      ready: function() {
        var newEl = document.createElement('div');
        Polymer.dom(this.root).querySelector('content-element').appendChild(newEl);
      }
    });
  </script>
</dom-module>

当我检查DOM时，div将按预期显示在content-element内。问题是当执行attached方法时，它返回一个空的HTML集合。我知道content-element有孩子了。如果我在同一个console.log(this.children)方法中attached，我将获得一个包含div的HTML集合。我也注意到如果我'硬编码'div，查询有效的子代将产生一个包含div的HTML集合。

<content-element>
  <div></div>
</content-element>

查询有效子项的能力很重要，因为附加的div数量会增加，我需要能够按类过滤它们。

this.queryAllEffectiveChildren('.red-divs-only');

使用this.children无法实现这一点，因为HTML集合不像数组那样可编辑。

更新

如果我向addElement添加一个名为content-element的公共方法，该方法附加父项传递给它的元素，我可以使用queryAllEffectiveChildren()获得结果。但是，我不明白为什么会这样，而另一种方式则不然。

<dom-module id="content-element">
  <template>

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

  </template>
  <script>
    Polymer({

      [...],

      addElement: function(el) {
        Polymer.dom(this).appendChild(el);
      },

      attached: function() {
        console.log(this.queryAllEffectiveChildren('div'));
      }
    });
  </script>
</dom-module>

<dom-module id="parent-element">
  <template>

    <content-element></content-element>

  </template>
  <script>
    Polymer({

      [...],

      ready: function() {
        var newEl = document.createElement('div');
        var conEl = Polymer.dom(this.root).querySelector('content-element');

        conEl.addElement(newEl);
      }
    });
  </script>
</dom-module>

Answer 1

这个问题的答案在于附加孩子的地方。

Polymer.dom(this.root).querySelector('content-element')定位到本地根目录，而不应将其附加到子目录中以用于内容标记。

相反，应该遵循Polymer文档中的说明，将子项附加到light dom。这可以通过将节点传递给公共方法来完成，其中元素可以将节点附加到自身：

addElement: function(el) {
  Polymer.dom(this).appendChild(el);
}

此外，light DOM可以直接定位：

var newEl = document.createElement('div');
var conEl = Polymer.dom(this.querySelector('content-element')).appendChild(newEl);

遵循其中一种方法将允许light DOM Polymer方法使用内容标记与元素的子项正确交互。

如何在自定义Polymer Web元素中查询动态注入的光子元素？

更新

1 个答案: