Uncaught SyntaxError: Unexpected token g in JSON at position 0

[f-santos]

Description

Once a new element attribute of type Array or Object is set but the value is a JavaScript object value added to the attribute with no .property notation the following exception is raised:
Uncaught SyntaxError: Unexpected token g in JSON at position 0

I discovered it because of a misconfiguration but as no clear exception is raised it took some time to discover what exactly was the issue.

Live Demo

https://lit-element-example-3c7ojq.stackblitz.io

Steps to Reproduce

1. Create my-element with an Array type attribute and render it as follows
   render(html<my-element moods=${['a', 'b']}>, document.body);

Expected Results

As the set value is wrong I expect the attribute to be set to a initial value [] or undefined but no exception raised.

Actual Results

Console exception:
Uncaught SyntaxError: Unexpected token g in JSON at position 0

Browsers Affected

I did not checked all but I believe the same shall happen in all major browsers.

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

Versions

• lit-element: 2.1.0

[sorvell]

That's fair, it should probably not throw an exception when an improper value is set. A PR would be welcome on this and would probably involve using a try/catch with a good fallback somewhere in here: https://github.com/Polymer/lit-element/blob/master/src/lib/updating-element.ts#L147

[f-santos]

@sorvell I've provided a possible solution in PR #723

[benjaminParisel]

I resumed the work of @f-santos from PR #723 and opened #888 with test and return to fixed this issue

[justinfagnani]

Fixed in Lit 2