<script>
  var configureBehavior = {

    changeHandlerCount: 0,
    objectChangeHandlerCount: 0,

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

</script>

<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>

<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>

<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>

<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>