Merge pull request #5125 from Polymer/auto-detect-attribute-capitaliz…

…ation Automatically detect capitalized HTML attributes
Polymer · Mar 13, 2018 · 5422bef · 5422bef
2 parents 83b13fa + 0573d48
commit 5422bef
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/lib/mixins/property-effects.html b/lib/mixins/property-effects.html
@@ -43,6 +43,9 @@
     READ_ONLY: '__readOnly'
   };
 
+  /** @const {string} */
+  const capitalAttributeRegex = /[A-Z]/;
+
   /**
    * @typedef {{
    * name: (string | undefined),
@@ -2535,7 +2538,12 @@
           // Attribute or property
           let origName = name;
           let kind = 'property';
-          if (name[name.length-1] == '$') {
+          // The only way we see a capital letter here is if the attr has
+          // a capital letter in it per spec. In this case, to make sure
+          // this binding works, we go ahead and make the binding to the attribute.
+          if (capitalAttributeRegex.test(name)) {
+            kind = 'attribute';
+          } else if (name[name.length-1] == '$') {
             name = name.slice(0, -1);
             kind = 'attribute';
           }

diff --git a/test/unit/property-effects-elements.html b/test/unit/property-effects-elements.html
@@ -7,6 +7,8 @@
 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
 -->
+<link rel="import" href="../../polymer.html">
+
 <dom-module id="x-basic">
   <template>
     <div id="boundChild"
@@ -1062,3 +1064,23 @@
 }
 customElements.define(SubObserverElement.is, SubObserverElement);
 </script>
+
+<dom-module id="svg-element">
+  <template>
+    <svg id="svg" viewBox="[[value]]"></svg>
+  </template>
+  <script>
+    class SVGElement extends Polymer.Element {
+      static get is() { return 'svg-element'; }
+      static get properties() {
+        return {
+          value: {
+            type: String,
+            value: '0 0 50 50'
+          }
+        };
+      }
+    }
+    customElements.define(SVGElement.is, SVGElement);
+  </script>
+</dom-module>
diff --git a/test/unit/property-effects.html b/test/unit/property-effects.html
@@ -419,6 +419,23 @@
       assert.equal(el.__observerCalled, 1);
     });
   });
+
+  suite('automated attribute capitalization detection', function() {
+    let el;
+
+    setup(function() {
+      el = document.createElement('svg-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('can handle capitalized HTML attribute', function() {
+      assert.equal(el.$.svg.getAttribute('viewBox'), el.value);
+    });
+  });
 });
 
 suite('computed bindings with dynamic functions', function() {