Merge pull request #5534 from Polymer/removeAttribute-scoping

Fix class$ bindings for ShadyDOM.noPatch mode
Polymer · May 6, 2019 · 3b6f334 · 3b6f334
2 parents 969f289 + 8043d4c
commit 3b6f334
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/lib/mixins/properties-changed.js b/lib/mixins/properties-changed.js
@@ -497,12 +497,12 @@ export const PropertiesChanged = dedupingMixin(
      */
     _valueToNodeAttribute(node, value, attribute) {
       const str = this._serializeValue(value);
+      if (attribute === 'class' || attribute === 'name' || attribute === 'slot') {
+        node = /** @type {?Element} */(wrap(node));
+      }
       if (str === undefined) {
         node.removeAttribute(attribute);
       } else {
-        if (attribute === 'class' || attribute === 'name' || attribute === 'slot') {
-          node = /** @type {?Element} */(wrap(node));
-        }
         node.setAttribute(attribute, str);
       }
     }

diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -729,6 +729,31 @@
 </script>
   </dom-module>
 
+<script type="module">
+  import { PolymerElement, html } from '../../polymer-element.js';
+  class ClassBindingUndefined extends PolymerElement {
+    static get is() { return 'class-binding-undefined'; }
+    static get properties() {
+      return {
+        data: {
+          type: Object
+        }
+      };
+    }
+    static get template() {
+      return html`
+      <style>
+        div {
+          border: 10px solid black;
+        }
+      </style>
+      <div id="div" class$="[[data.class]]">Foo</div>
+      `;
+    }
+  }
+  customElements.define(ClassBindingUndefined.is, ClassBindingUndefined);
+</script>
+
 <script type="module">
 import { dom } from '../../lib/legacy/polymer.dom.js';
 import { flush } from '../../lib/utils/flush.js';
@@ -1015,6 +1040,13 @@
     assert.isTrue(el.classList.contains('e'));
   });
 
+  test('scoping classes are preserved when a class$ binding resolves to undefined', function() {
+    const e = document.createElement('class-binding-undefined');
+    document.body.appendChild(e);
+    const el = e.$.div;
+    assertComputed(el, '10px');
+  });
+
 });
 
 suite('double including style sheets', function() {