From 83c0e9d1439f1e1d6234ac359725a0ec09ee0e47 Mon Sep 17 00:00:00 2001
From: Steven Orvell <sorvell@google.com>
Date: Fri, 9 Nov 2018 18:04:58 -0800
Subject: [PATCH] Ensure initial static classes are preserved when a class$
 binding is present.

This ensures ShadyCSS scoping classes are not removed when a class binding's initial literal value is set.
---
 lib/mixins/property-effects.html |  5 +++++
 test/unit/styling-scoped.html    | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/lib/mixins/property-effects.html b/lib/mixins/property-effects.html
index 1d235548ef..97e0ea96a4 100644
--- a/lib/mixins/property-effects.html
+++ b/lib/mixins/property-effects.html
@@ -2551,6 +2551,11 @@
           // Initialize attribute bindings with any literal parts
           let literal = literalFromParts(parts);
           if (literal && kind == 'attribute') {
+            // Ensure a ShadyCSS template scoped style is not removed
+            // when a class$ binding's initial literal value is set.
+            if (name == 'class' && node.hasAttribute('class')) {
+              literal += ' ' + node.getAttribute(name);
+            }
             node.setAttribute(name, literal);
           }
           // Clear attribute before removing, since IE won't allow removing
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index e5dcddb64f..d761808795 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -160,6 +160,19 @@
   </script>
 </dom-module>
 
+<dom-module id="x-class-literal">
+  <template>
+    <div id="scope" class$="a [[b]] c" class="d e">Trivial</div>
+  </template>
+  <script>
+    HTMLImports.whenReady(function() {
+      Polymer({
+        is: 'x-class-literal'
+      });
+    });
+</script>
+</dom-module>
+
 
 
 <dom-module id="x-styled">
@@ -1041,6 +1054,17 @@
       assertComputed(e, '2px');
     });
 
+    test('initial literal values in class are preserved when a class$ binding is present', function() {
+      var e = document.createElement('x-class-literal');
+      document.body.appendChild(e);
+      var el = e.$.scope;
+      assert.equal(el.classList.length, 4);
+      assert.isTrue(el.classList.contains('a'));
+      assert.isTrue(el.classList.contains('c'));
+      assert.isTrue(el.classList.contains('d'));
+      assert.isTrue(el.classList.contains('e'));
+    });
+
   });
 
   suite('double including style sheets', function() {