Specifying a property as `type: Array` doesn't seem to parse the string property value correctly

Question

Update: Filed a bug at https://github.com/Polymer/lit-element/issues/411

I'm having trouble implementing the default and custom converter for properties given the information in the guide. With the current version (0.6.5), it says that you can assign the type Array to a property and it will automatically be parsed as JSON from the string value of the attribute, but that doesn't seem to be the case as described in the code sample.

Here's an illustration of the problem. In the console, it should report an array with three elements, yet it returns an array of one element, the string that contains the attribute value. The result of the render method also shows just one <p> element containing the single string.

<script type="module">
import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element@0.6.5/lit-element.js?module';

class Histogram extends LitElement {
  static get properties() {
    return {
      values: { type: Array }
    };
  }
  
  constructor() {
    super();
    this.values = [];
  }
  
  render() {
    console.log(Array.isArray(this.values), this.values);
    return html`
<div>
  The elements:
  ${this.values.map(item => html`<p>item: ${item}</p>`)}
</div>
`;
  }
}

customElements.define('x-histogram', Histogram);
</script>

<x-histogram values="[1,2,3]"/>

I've also tried modifying the example by providing a converter, but that doesn't seem to get invoked, either. What am I doing wrong?

Answer 1

I had a look. The 0.6.5 updating-element.js file doesn't even have converting for array. And looking at the npm package of 0.6.5 it doesn't mention an array either.

But the master branch does map the array type, and it has it mentioned in the readme. It should work for you if you pull it and use it directly.