comparison.md

Comparison

This section tries to make the individual use cases clearer.

Firing an event on property change

PolymerElement

class NotifyingElement extends PolymerElement {
    static get properties() {
        return {
            message: {
                type: String,
                notify: true
}}}}

LitElement

class NotifyingElement extends LitElement {
    static get properties() {
        return {
            message: {
                type: String
    }}}
    update(props) {
        super.update(props);
        if (props.has('message')) {
            this.dispatchEvent(new CustomEvent('message-changed', {
                detail: {
                    value: this.message,
                },
                bubbles: false,
                composed: true
        }));
    }
}

LitElement with LitNotify mixin

class NotifyingElement extends LitNotify(LitElement) {
    static get properties() {
        return {
            message: {
                type: String,
                notify: true
}}}}

mapping a camelCase property to a kebap-case event (as PolymerElement does automaticly)

class NotifyingElement extends LitNotify(LitElement) {
    static get properties() {
        return {
            myMessage: {
                type: String,
                notify: 'my-message-changed'
}}}}

Two-way data binding

Synchronizing a parent property with a childs property.

PolymerElement*

html`<element value="{{myProperty}}"></element>`

Lit Element - upwards binding only

html`<element @value-changed=${(e) => this.myProperty = e.detail.value}></element>`

LitElement*

html`<element .value=${this.myProperty} @value-changed=${(e) => this.myProperty = e.detail.value}></element>`

LitElement with sync directive*

html`<element .value=${this.sync('myProperty')}></element>`

_{* two-way binding so also updating the child when the parent property changes}