diff --git a/CHANGELOG.md b/CHANGELOG.md index 522a29c9f2..0a15e04e26 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,6 +34,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/). * Adopt and upgrade template fragments after processing for parts ([#831](https://github.com/Polymer/lit-html/issues/831)). * Fixed bindings with attribute-like expressions preceeding them ([#855](https://github.com/Polymer/lit-html/issues/855)). * Fixed errors with bindings in HTML comments ([#882](https://github.com/Polymer/lit-html/issues/882)). +* Change `classMap` directive to set classes correctly on SVGs ([#930](https://github.com/Polymer/lit-html/issues/930)). ## [1.0.0] - 2019-02-05 ### Changed diff --git a/src/directives/class-map.ts b/src/directives/class-map.ts index 3258023eb6..e007fb19bc 100644 --- a/src/directives/class-map.ts +++ b/src/directives/class-map.ts @@ -48,7 +48,7 @@ export const classMap = directive((classInfo: ClassInfo) => (part: Part) => { // handle static classes if (!classMapCache.has(part)) { - element.className = committer.strings.join(' '); + element.setAttribute('class', committer.strings.join(' ')); } const {classList} = element; diff --git a/src/test/directives/class-map_test.ts b/src/test/directives/class-map_test.ts index 50782cb23d..ef6a7fe3f3 100644 --- a/src/test/directives/class-map_test.ts +++ b/src/test/directives/class-map_test.ts @@ -17,7 +17,7 @@ import {ClassInfo, classMap} from '../../directives/class-map.js'; import {render} from '../../lib/render.js'; -import {html} from '../../lit-html.js'; +import {html, svg} from '../../lit-html.js'; const assert = chai.assert; @@ -81,6 +81,15 @@ suite('classMap', () => { assert.isFalse(el.classList.contains('foo')); }); + test('adds classes on SVG elements', () => { + const cssInfo = {foo: 0, bar: true, zonk: true}; + render(svg``, container); + const el = container.firstElementChild!; + assert.isFalse(el.classList.contains('foo')); + assert.isTrue(el.classList.contains('bar')); + assert.isTrue(el.classList.contains('zonk')); + }); + test('throws when used on non-class attribute', () => { assert.throws(() => { render(html`
`, container);