setProperties not work

[zarudYin]

Description

When using setProperties to change 2 sub-attributes, the sub-element cannot display 2 changes correctly. Only the first sub-property change in the object will be displayed.

Code

class PolymerDemoApp extends PolymerElement {
    static get template() {
        return html`
            <button on-click="handleClick">Click</button>
            <info-area info-obj="{{user}}"></info-area>
        `;
    }

    static get properties() {
        return {
            user: {
                type: Object,
                value: {
                    name: 'tom',
                    sex: 'man'
                }
            }
        };
    }

    handleClick() {
        this.setProperties({ 'user.name': 'jack', 'user.sex': 'woman' });
    }
}

window.customElements.define('polymer-demo-app', PolymerDemoApp);

class InfoArea extends PolymerElement {
    static get template() {
        return html`
            <div>name: {{infoObj.name}}, sex: {{infoObj.sex}}</div>
        `;
    }

    static get properties() {
        return {
            infoObj: {
                type: Object,
                value: null
            }
        };
    }
}

window.customElements.define('info-area', InfoArea);

after click button

the sex is not change

Versions

• Polymer: v3.1.0
• webcomponents: v2.0.0

[kevinpschaaf]

Batching of path changes via setProperties is not supported for this reason. See the API docs here: https://polymer-library.polymer-project.org/3.0/api/polymer-element#PolymerElement-method-setProperties