Improve docs and add test for case conversion.

Author: Steven Orvell

lib/elements/basic-element.html

@@ -40,9 +40,15 @@
       }
     }
 
+    /**
+     * Implements standard custom elements getter to observes the attributes
+     * listed in `properties`. These are camel to dash cased.
+     */
     static get observedAttributes() {
       const props = this.properties;
-      return props ? Object.keys(props) : [];
+      return props ? Object.keys(props).map(p => {
+        return this.prototype._attributeNameForProperty(p);
+      }) : [];
     }
 
     /**
@@ -60,14 +66,21 @@
     }
 
     /**
-     * Overrides default behavior and adds a call to `finalize`.
+     * Overrides default behavior and adds a call to `finalize` which lazily
+     * configures the element's property accessors.
      * @override
      */
     _initializeProperties() {
       this.constructor._ensureFinalized(this.localName);
       super._initializeProperties();
     }
 
+    /**
+     * Overrides default behavior to use `type` information stored in the
+     * static `properties` object. This allows attributes to be converted to
+     * the coressponding type given in `properties`. Atributes are dash to
+     * camel cased.
+     */
     _attributeToProperty(attribute, value, type) {
       if (!type) {
         const property = this._propertyNameForAttribute(attribute);
@@ -78,6 +91,11 @@
       super._attributeToProperty(attribute, value, type);
     }
 
+    /**
+     * Called when the element is added to a document.
+     * Calls `_enableProperties` to turn on property system from
+     * `PropertyAccessors`.
+     */
     connectedCallback() {
       this._enableProperties();
     }

test/unit/polymer.basic-element.html

@@ -149,7 +149,8 @@
 
       static get properties() {
         return Object.assign({
-          prop3: String
+          prop3: String,
+          camelCase: String
         }, super.properties);
       }
 
@@ -195,7 +196,7 @@
 
   <test-fixture id="sub-mixin-element-attr">
     <template>
-      <sub-mixin-element prop="attr" prop2="attr" prop3="attr" mixin="5"></sub-mixin-element>
+      <sub-mixin-element prop="attr" prop2="attr" prop3="attr" mixin="5" camel-case="camelCase"></sub-mixin-element>
     </template>
   </test-fixture>
 
@@ -343,12 +344,12 @@
       assert.equal(fixtureEl.prop, 'attr');
       assert.equal(fixtureEl.prop2, 'attr');
       assert.equal(fixtureEl.prop3, 'attr');
+      assert.equal(fixtureEl.camelCase, 'camelCase');
       assert.equal(fixtureEl.mixin, 5);
-      assert.equal(fixtureEl._callAttributeChangedCallback, 4);
+      assert.equal(fixtureEl._callAttributeChangedCallback, 5);
       assert.isTrue(fixtureEl.hasAttribute('tabindex'));
       assert.equal(fixtureEl.getAttribute('role'), 'button');
       assert.equal(fixtureEl.getAttribute('mixinattr'), 'mixinattr');
-      assert.equal(fixtureEl.getAttribute('submixinattr'), 'submixinattr');
     });
 
   });