Hyperhtml: IE11 breaks on custom attribute interpolation with webcomponents-sd-ce.js polyfill

[pmowrer]

When using hyperhtml with webcomponents-sd-ce.js and interpolating a custom attribute, IE11 throws HierarchyRequestError. It works fine in every other browser I tested, including Edge 14 and Safari 9.1.

var html = hyperHTML.bind(document.body);

html`
  <div custom="${true}">test</div>
`

CodePen

It seems to work for non-custom attributes. This works:

var html = hyperHTML.bind(document.body);

html`
  <div disabled="${true}">test</div>
  <li value="${true}">test</li>
`

I suppose this is likely a bug with the monkey patching performed by the polyfill. What are your thoughts?

[WebReflection]

if you remove the polyfill, which is completely useless in your example, does IE11 throws any error?

[WebReflection]

... and btw, about these cases, my thoughts in a nutshell: https://twitter.com/WebReflection/status/956480147502313472

[pmowrer]

if you remove the polyfill, which is completely useless in your example, does IE11 throws any error?

Yes. No, it doesn't throw an error then. I didn't include any code that depends on the polyfill in the example since it isn't necessary to reproduce the issue.

[pmowrer]

Narrowed down the actual issue. Sorry about the noise.

[WebReflection]

awesome finding (for them to fix) ... I don't want to say _told'ya so_ ... but ... told-ya so 😂😂😂