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 @@
+
+
+ Trivial
+
+
+
+
@@ -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() {