Nested Content in Shadow DOM

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<polymer-element name="x-foo">
  <template>
    <h1>Foo</h1>
      Contains <span id="childElementCount1"></span> element(s)/node(s).
    <div style="border: 1px solid gray;">
       <content></content>
    </div>
  </template>
  <script>
    Polymer('x-foo',{
      ready: function(){
      alert( this.childElementCount1)
      this.$.childElementCount.innerHTML = this.childElementCount1 + "/" + this.shadowRoot.querySelector('content').getDistributedNodes().length;
      }
      });
  </script>
</polymer-element>
  
<polymer-element name="x-bar">
  <template>
    <h1>Bar</h1>
    <div style="border: 1px solid red;">
        <x-foo>
          <content></content>
        </x-foo>
    </div>
  </template>
  <script>
    Polymer('x-bar');
  </script>
</polymer-element>

<x-foo>
  <p>Content</p>
</x-foo>
<x-bar>
  <p>Nested content</p>
</x-bar>