@polymer/polymer/test/unit/attributes-elements.html

The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to

<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<script>
  let PropertyTypeBehavior = {
    properties: {
      behaviorShorthandNumber: Number,
      behaviorShorthandBool: Boolean,
      behaviorNumber: {
        value: 11,
        type: Number
      },
      behaviorBool: {
        value: false,
        type: Boolean
      }
    }
  };

  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'
    },
    behaviors: [ PropertyTypeBehavior ],
    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'
      },
      UPCASE: {
        type: String,
        value: 'none'
      },
      noType: {
        value: 'none'
      },
      readOnly: {
        type: String,
        value: 'default',
        readOnly: true
      },
      prop: {
        value: 'prop',
        observer: 'propChanged'
      },
      attr1: {
        observer: 'attr1Changed'
      },
      shorthandNumber: Number,
      shorthandBool: Boolean,
      foreignTypeObjectProp: {
        type: Object,
        value: 'none'
      }
    },

    propChangedCount: 0,
    attr1ChangedCount: 0,

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

    attr1Changed: function() {
      this.attr1ChangedCount++;
    }

  });
</script>

<script>
  Polymer({
    is: 'x-reflect',
    behaviors: [ PropertyTypeBehavior ],
    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'
      },
      UPCASE: {
        type: String,
        reflectToAttribute: true,
        value: 'none'
      },
      noType: {
        value: 'none'
      },
      readOnly: {
        type: String,
        value: 'default',
        readOnly: true
      },
      shorthandNumber: Number,
      shorthandBool: Boolean,
      foreignTypeObjectProp: {
        type: Object,
        reflectToAttribute: true,
        value: 'none'
      }
    },
    _warn: function() {
      var search = Array.prototype.join.call(arguments, '');
      if (search.indexOf('UPCASE') > -1) {
        this.__warnedAboutUPCASE = 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: {
      attr1: String,
      prop2: String
    },

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