classMap directive does not work with SVG

[AdamVig]

Description

When using the classMap directive in an SVG template, I get the following error:

Unhandled promise rejection TypeError: "setting getter-only property "className""

The error comes from this line in class-map.ts.

According to the SVG specification, className is a readonly property. This differs from className on Element, which can be set.

Steps to Reproduce

1. Write this code

import {svg, render} from 'lit-html';
import {classMap} from 'lit-html/directives/class-map';

render(svg`<circle class=${classMap({active: true})} cx="23.401" cy="29.716" r="4.301"/>`, document.body);

2. See this output...

Live Reproduction Link

https://stackblitz.com/edit/lit-html-svg-classname-bug-repro

Expected Results

The class active should have been applied to <circle>.

Actual Results

The following error is thrown:

Unhandled promise rejection TypeError: "setting getter-only property "className""

Browsers Affected

Should affect all browsers, but I only tested the ones checked below.

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

[jridgewell]

Would you like to fix this? Should be as simple as changing that to a el.setAttribute('class', value)

[AdamVig]

I would be glad to. I will have a pull request up later today or early tomorrow.

[AdamVig]

@jridgewell Fixed in #932.

[justinfagnani]

Reopening because we had to revert #932

[tstewart-klaudhaus]

Any prospect of other approaches to get this to work?

For those like me who came here because classMap doesn't work on SVGs, my workaround is to have a function that concatenates a class string without using the classMap directive and assign direct to the class attribute.

const pointClass = d => `point${d.selected ? " selected" : ""}`

<g class=${pointClass(d)} > 

Not sure if this works across browsers, I don't have IE / Edge installed at the moment, will try it there once pushed to test server.