polymer/test/unit/configure-elements.html

<script>
  var configureBehavior = {

    changeHandlerCount: 0,
    objectChangeHandlerCount: 0,

    contentChanged: function() {
      this.changeHandlerCount++;
      this.stomp = 10;
    },
    objectChanged: function() {
      this.objectChangeHandlerCount++;
    }
  };

</script>

<dom-module id="x-configure-value">
  <template>
    <span id="content">{{content}}</span>
  </template>
  <script>
    Polymer({

      is: 'x-configure-value',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'default'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {foo: 'obj-default'}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        }
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-gchild">
  <template>
    <span id="content">{{content}}</span>
  </template>
  <script>
    Polymer({

      is: 'x-configure-gchild',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'gchild'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {foo: 'obj-default'}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        }
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-child">
  <template>
    <x-configure-gchild id="gchild" content="{{content}}" object="{{object}}"></x-configure-gchild>
  </template>
  <script>
    Polymer({

      is: 'x-configure-child',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'child'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {foo: 'obj-default'}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        }
      }

    });
  </script>
</dom-module>

<dom-module id="x-configure-host">
  <template>
    <x-configure-child id="child" content="{{content}}" object="{{object.goo}}"></x-configure-child>
  </template>
  <script>
    Polymer({

      is: 'x-configure-host',

      behaviors: [configureBehavior],

      properties: {
        content: {
          type: String,
          notify: true,
          observer: 'contentChanged',
          value: 'host'
        },
        object: {
          type: Object,
          notify: true,
          value: function() { return {goo: {foo: 'obj-host'}}; },
          observer: 'objectChanged'
        },
        readOnly: {
          readOnly: true,
          value: 'default'
        },
        stomp: {
          value: 5
        }
      }

    });
  </script>
</dom-module>