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