polymer/test/unit/attributes-elements.html

<script>
  Polymer({
    is: 'x-basic',
    hostAttributes: {
      attr1: 'this is attr 1',
      attr2: 42,
      attr3: 'host',
      'aria-role': 'button',
      title: 'awesome',
      'attr-object': {foo: 'bar', nested: {'meaning': 42}, arr: [0, 'foo', true]},
      'attr-stupid': false,
      class: 'foo bar baz'
    },
    properties: {
      object: {
        type: Object,
        value: function() { return {}; }
      },
      array: {
        type: Array,
        value: function() { return []; }
      },
      number: {
        type: Number,
        value: 0
      },
      string: {
        type: String,
        value: 'none'
      },
      bool: {
        type: Boolean,
        value: true
      },
      negBool: {
        type: Boolean,
        value: false
      },
      date: {
        type: Date,
        value: function() { return new Date(0); }
      },
      dashCase: {
        type: String,
        value: 'none'
      },
      noType: {
        value: 'none'
      },
      readOnly: {
        type: String,
        value: 'default',
        readOnly: true
      },
      prop: {
        value: 'prop',
        observer: 'propChanged'
      },

      attr1: {
        observer: 'attr1Changed'
      }
    },

    propChangedCount: 0,
    attr1ChangedCount: 0,

    propChanged: function(prop) {
      this.propChangedCount++;
    },

    attr1Changed: function(prop) {
      this.attr1ChangedCount++;
    }
    
  });
</script>

<script>
  Polymer({
    is: 'x-reflect',
    properties: {
      object: {
        type: Object,
        reflectToAttribute: true,
        value: function() { return {}; }
      },
      array: {
        type: Array,
        reflectToAttribute: true,
        value: function() { return []; }
      },
      number: {
        type: Number,
        reflectToAttribute: true,
        value: 0
      },
      string: {
        type: String,
        reflectToAttribute: true,
        value: 'none'
      },
      bool: {
        type: Boolean,
        reflectToAttribute: true,
        value: true
      },
      negBool: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      },
      date: {
        type: Date,
        reflectToAttribute: true,
        value: function() { return new Date(0); }
      },
      dashCase: {
        type: String,
        reflectToAttribute: true,
        value: 'none'
      },
      noType: {
        value: 'none'
      },
      readOnly: {
        type: String,
        value: 'default',
        readOnly: true
      }
    }
  });
</script>

<dom-module id="x-compose">
  <template>
    <x-basic id="basic" prop="{{attr1}}" attr1$="{{attr1}}" class="should-not-override"></x-basic>
  </template>
</dom-module>
<script>
  Polymer({

    is: 'x-compose',

    hostAttributes: {
      attr1: 'compose'
    },

    properties: {
      prop2: String
    },

    ready: function() {
      this.setAttribute('prop2', 'hi');
    }
  });
</script>