Change classMap to set classes correctly for SVGs

src/directives/class-map.ts

@@ -46,13 +46,13 @@ export const classMap = directive((classInfo: ClassInfo) => (part: Part) => {
   const {committer} = part;
   const {element} = committer;
 
+  const {classList} = element;
+
   // handle static classes
   if (!classMapCache.has(part)) {
-    element.className = committer.strings.join(' ');
+    classList.value = committer.strings.join(' ');
   }
 
-  const {classList} = element;
-
   // remove old classes that no longer apply
   const oldInfo = classMapCache.get(part);
   for (const name in oldInfo) {

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`<circle class="${classMap(cssInfo)}"></circle>`, 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`<div id="${classMap({})}"></div>`, container);