five-bells-visualization/public/bower_components/polymer/test/unit/polymer-dom-elements.html

Tool to visualize Five Bells payments

<dom-module id="x-project">
  <template>
    x-project: [<content></content>]
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-project'
  });
</script>

<dom-module id="x-reproject">
  <template>
    <x-project>x-reproject: [<content></content>]</x-project>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-reproject'
  });
</script>

<dom-module id='x-rereproject'>
  <template>
    <x-reproject>x-rereproject: [<content></content>]</x-reproject>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-rereproject',
    attachedCount: 0,
    attached: function() {
      this.attachedCount++;
    }
  });
</script>

<dom-module id="x-test">
  <template>
    <x-rereproject><span id="projected">projected</span></x-rereproject>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-test'
  });
</script>

<dom-module id="x-test-no-distribute">
  <template>
    <content select=".foo"></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-test-no-distribute'
  });
</script>

<dom-module id="x-distribute">
  <template>
    <div>
      <span>Elements without test attribute</span>
      <div id="notTestContainer" style="color: white; background-color: green; min-height: 1em;">
        <content id="notTestContent" select=":not([test])"></content>
      </div>
      <span>Elements with test attribute</span>
      <div style="color: white; background-color: red; min-height: 1em;">
        <div id="testContainer">
          <content id="testContent" select="[test]"></content>
        </div>
      </div>
    </div>
  </template>
</dom-element>

<script>
  Polymer({
    is: "x-distribute"      
  });
</script>

<dom-module id="x-compose">
  <template><x-project id="project"></x-project></template>
</dom-module>
<script>
  Polymer({
    is: 'x-compose'
  });
</script>