Polymer：如何访问'content'标签内的元素

Question

I have made a custom element, a list with a built-in filter:

Template for 'filter-list':

<template>
  <content select="item"></content>
</template>

...

<filter-list filter='AAA'>
  <item class="AAA">1</item>
  <item class="AAA">2</item>
  <item class="BBB">3</item>
  <item class="BBB">4</item>
  <item class="CCC">5</item>
  <item class="CCC">6</item>
</filter-list>

The idea is that the list will show/hide items that match the class in filter. To this end, I wrote the following callback:

    Polymer('filter-list', {
        filter: '',
        ready: function() {
        },

        filterChanged: function() {
            if(this.filter) {
                items = this.$.items.querySelectorAll("."+this.filter);
                console.log("Showing "+items.length+" items.");
            }
        },
    });

But I can't get through to the item nodes. items.length is always 0. How can I get to the item -elements of the light DOM within the custom element API?

Answer 1

You can access the nodes that are inserted with the <content> tag through the getDistributedNodes() function.

Here is a small complete example for your scenario:

<polymer-element name="filter-list" attributes="filter">
  <template>
    <content id="items" select="item"></content>
  </template>
  <script>
    Polymer('filter-list', {
      ready: function() {
        this.filter = '';
      },
      filterChanged: function() {
        var items = this.$.items.getDistributedNodes();
        for (var i = 0; i < items.length; ++i) {
          items[i].style.display = items[i].className == this.filter ? 'block' : 'none';
        }
      }
    });
  </script>
</polymer-element>

<polymer-element name="my-app" noscript>
  <template>
    <input value="{{filter}}">
    <filter-list filter="{{filter}}">
      <item class="AAA">1</item>
      <item class="AAA">2</item>
      <item class="BBB">3</item>
      <item class="BBB">4</item>
      <item class="CCC">5</item>
      <item class="CCC">6</item>
    </filter-list>
  </template>
</polymer-element>

<my-app></my-app>

One can enter the filter string in the input field. The filter is initially empty, so no items are displayed after a page load.