Lit-html: MS Edge: NamedNodeMap.getNamedItem('some-attr$') throws

[keanulee]

On Edge, NamedNodeMap.getNamedItem('some-attr$') throws an InvalidCharacterError (suspect the $, which is used for attribute binding). This is used here - https://github.com/Polymer/lit-html/blob/master/src/lit-html.ts#L316

[valdrinkoshi]

(Including the commit sha to have the line rendered inline)

https://github.com/Polymer/lit-html/blob/54afddcfa7de802181e502f3b69599aa0507efb8/src/lit-html.ts#L316

[justinfagnani]

Along with #302, there's a possible fix here: https://github.com/Polymer/lit-html/pull/344/files#diff-7548be97e171131880082c935a962f68R326

We need a regression test though.

[csvn]

Should not be hard to reproduce for testing. The below code does not work in Edge 16. (https://jsfiddle.net/nf4w7o92/7/)

<script type="module">
import { html, render } from 'https://unpkg.com/[email protected]/lib/lit-extended.js';

render(html`<h2 title$="${'test'}">Should render without error</h2>`, document.body);
</script>

[bgotink]

The tests contain scenarios where attributes contain $, e.g.

https://github.com/Polymer/lit-html/blob/1a993e74411981e623c6d66cc2fb81ff279932f5/src/test/lib/lit-extended_test.ts#L41-L44

The jsfiddle works fine in Edge 17 (see screenshot below). The tests work fine in Edge 15.
Maybe this bug only affects Edge 16? A regression test might be as simple as adding windows 10/microsoftedge@16 to the list of browsers to test in travis.

[jridgewell]

@justinfagnani: The issue here is Edge doesn't accept invalid XML attr names, which follow different rules than HTML's attrs:

• Name: https://www.w3.org/TR/xml/#NT-Name
  
  
  
  • NameStartChar: https://www.w3.org/TR/xml/#NT-NameStartChar
  
  
  • NameChar: https://www.w3.org/TR/xml/#NT-NameChar
  
  

This'll also affect the proposed .prop syntax for lit-extended. You could use trailing prop. style, since NameChar allows periods.

Adding to @csvn's test cases: https://output.jsbin.com/xaliyud/quiet:

[justinfagnani]

We have test coverage of the new syntax, but it seems like Sauce is picking Edge 15 to run the tests on. I'll keep this issue open until we make sure test also pass on 16 and 17.

[ruphin]

This issue has been resolved, we now use .getAttribute() over .attributes.getNamedItem(), which does not break in Edge.