Implement property change notification events (notify)

What about something like Polymer’s notify (automatic property change notification events) to make upward data flow easier?

Problem:

lit-element (lit-html) doesn’t support 2-way binding. The correct way to pass data upwards is to use events.

E.g. for <paper-toggle-button> I can listen on-checked-changed, and then create a handler that sets the toggled property to the value I get from the event:

static get properties() {
  return {
    toggled: Boolean
  }
}

_render({toggled}) {
  return html`
    <paper-toggle-button
        checked="${toggled}"
        on-checked-changed="${this.onCheckedChanged.bind(this)}">
    </paper-toggle-button>

    ${toggled}
  `;
}

onCheckedChanged(e) {
  this.toggled = e.detail.value;
}

But what if I want to use <mwc-switch> (which is also based on lit-element) instead of <paper-toggle-button>?

The problem is that <mwc-switch> has no the checked-changed custom event unlike <paper-toggle-button>.

(The fact that <mwc-switch> has no the checked-changed custom event, shows that material-web-components violate Property Change Events rule of the The Gold Standard Checklist for Web Components.)

I’ve found https://github.com/DiiLord/lit-element and it has notify.

What about to port it to this element? It helps implement property change notification events as easy as adding notify to property in static get properties().

[TimvdLippe]

(The fact that <mwc-switch> has no the checked-changed custom event, shows that material-web-components violate Property Change Events rule of the The Gold Standard Checklist for Web Components.)

I would actually say: mwc-switch should start firing the event, rather than making any update to LitElement.

[pshihn]

@pitus that’s because some (and custom) events do not cross the shadow dom boundary by default. You need to set composed to true.

const event = new CustomEvent('my-event', { bubbles: true, composed: true });
this.dispatchEvent(event);