Adding items to array does not trigger _render call

Description

When changing array data the change is not recognized until _requestRender() is called

Live Demo

https://glitch.com/edit/#!/bold-cuticle

Steps to Reproduce

1. create my-element
2. create an array property
3. use the array property in the _render function
4. add items to the array in an event listener function

Expected Results

The _render function is called

Actual Results

Nothing happens

Browsers Affected

• Chrome
• Firefox
• [ ?] Edge
• Safari 11
• [? ] Safari 10
• [ ?] IE 11

Versions

• lit-element: v0.5.2
• webcomponents: vX.X.X

[nicolasparada]

This is the expected behavior. On Polymer they have this.push. On lit-element you can do:

this.colors = [...this.colors, 'green']

To override the complete array instead of mutating it.

[sorvell]

Out of the box, LitElement uses a strict equals check to see if a property has changed. This means it’s ideally suited to immutable data patterns as noted above.

However, sometimes, you need more control over this, so LitElement 0.6 will be exposing a property-based invalidation function so you can decide exactly when and if setting a property should trigger an invalidation and rendering. For example, if a property is always an object that should only trigger rendering if a key property changes, you could do this:

static get properties() {
  foo: {shouldInvalidate: (value, oldValue) => value.key !== oldValue.key;}
}

To make any set to a mutating object/array typed property always trigger invalidation, you could do something like the following. Please note that for performance reasons you should use this pattern sparingly because it can sometimes can result in a large amount of unnecessary work.

static get properties() {
  foo: { shouldInvalidate: (value, oldValue) => true }
}