获取由内容元素选择的dom-repeat模板生成的元素

Question

i'm trying to get elements produced by a helper elements on polymer, which is selected of a content tag. this a simple example that I trying to do:

dom-module

 <dom-module id="x-foo"> <template> <content id="content"></content> </template> <script> Polymer({ is: 'x-foo', attached: function() var effectiveChildren = this.getEffectiveChildren("span"); console.log(effectiveChildren); } }); </script> </dom-module> 

index.html

 <template is="dom-bind"> <x-foo> <template is="dom-repeat" items="{{list}}"> <span>{{item.name}}</span> </template> </x-foo> </template> <script> var scope = document.querySelector("template[is='dom-bind']"); scope.list = [{"name":"javier"},{"name":"pedro"},{"name":"javier2"}] </script> 

--- edit ---

I try with:

getDistributedNodes()
getEffectiveChildren()
getContentChildren()

any hint??

Answer 1

So there was a little bit more to this, but also a little bit less. The code you looking for is:

this.queryAllEffectiveChildren('span');

However, there's gonna be a lot of particularities around when all of the DOM is available to actually run this depending on the final application of your component. I've got it working here: http://plnkr.co/edit/nfER4vTe5y7CddHYO5bk?p=preview the main thing being I'm waiting for the dom-change event on the dom-repeat to check for those elements. There's definitely something cleaner to be used around DOM flush or the like, but I'm not sure which way to direct you in there. The main crux is:

<template>
  There are {{childCount}} children.<br/>
    <content></content>
</template>
<script>
    Polymer({
        is: 'my-element',
        listeners: {
          'dom-change': 'childCheck'
        },
          childCheck: function() {
              this.childCount = this.queryAllEffectiveChildren('span').length;
              console.log(this.queryAllEffectiveChildren('span'));
        }
    });
</script>