IE11/Edge: Lit Markers within SVG causes errors.

[deepsnitk]

Description

When using the 'svg' tagged template of lit-element, if the content within it has a 'path' element for which the 'd' attribute is dynamically set, then the 'd' attribute will be missing in IE11/Edge16 with an error: SVG4601: SVG Path data has incorrect format and could not be completely parsed.
Since 'd' determines the path, there is nothing displayed.

Live Demo

https://astonishing-purpose.glitch.me/

Steps to Reproduce

Inside 'svg' tagged template literal add 2 elements:

1. An SVG with only static values.
2. Another SVG same as above but with the nested 'path' element having dynamic 'd' value.

Expected Results

Output should render 2 SVG elements.

Actual Results

Chrome: Both SVGs are visible as expected.
IE11/Edge16: Only one SVG is rendered onto the browser.

Browsers Affected

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

Versions

• lit-element: v0.6.1
• webcomponents: v2.1.3

[deepsnitk]

From my analysis, it looks like the following could be the culprit in IE11/Edge:
template.innerHTML = this.getHTML();
The 'd' attribute with random value like below is considered invalid:
<path class="slice extended" d={{lit-7566279216523466}} fill="{{lit-7566279216523466}}" />

[deepsnitk]

I think angular has a solution to this late binding attribute problem in SVG: angular/angular.js#2061

[justinfagnani]

This is just a dupe of the upstream lit-html issue you filed: lit/lit#594. Let's just track there. Otherwise we could duplicate every lit-html issue here.