Skip to content

Commit

Permalink
Ensure initial static classes are preserved when a class$ binding is …
Browse files Browse the repository at this point in the history
…present

This ensures ShadyCSS scoping classes are not removed when a class binding's initial literal value is set.
  • Loading branch information
Steven Orvell committed Nov 10, 2018
1 parent 82c9d17 commit 65a3149
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 0 deletions.
5 changes: 5 additions & 0 deletions lib/mixins/property-effects.js
Original file line number Diff line number Diff line change
Expand Up @@ -2543,6 +2543,11 @@ export const PropertyEffects = dedupingMixin(superClass => {
// 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
Expand Down
23 changes: 23 additions & 0 deletions test/unit/styling-scoped.html
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,18 @@
</script>
</dom-module>

<dom-module id="x-class-literal">
<template>
<div id="scope" class$="a [[b]] c" class="d e">Trivial</div>
</template>
<script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
is: 'x-class-literal'
});
</script>
</dom-module>



<dom-module id="x-styled">
Expand Down Expand Up @@ -993,6 +1005,17 @@
assertComputed(e, '5px', 'padding-top');
});

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() {
Expand Down

0 comments on commit 65a3149

Please sign in to comment.