Lit-element: how do you re-render with litelement?

[codingphasedotcom]

So I've been playing around with polymer for the first time in the last 2 days so I'm new to this framework but I'm very experienced with react... now I can't seem to find away to re-render the html no matter what I do. Also the methods this.set, this.notifyPath, this.push don't work.

here's what i'm working on stackblitz so you can tell me what am I do wrong
https://stackblitz.com/edit/lit-element-example-zkxtyl

[Lodin]

Well, first of all, you don't have any state here. To catch changes, you have to define your variable in static get properties() and then just change it in any way you want. E.g. to make your button clickable, I moved your showPopup variable out of state object, and it started to change.

https://stackblitz.com/edit/lit-element-example-k8yuxa

[codingphasedotcom]

yes I got that part working... if I put something inside of this.showPopup it renders. But what if I have an object? shouldn't it re-render when I do a change on that object. I just called it state because I'm used to react but i could of called it

this.settings = {
 showPopup: false
}

// if i change the this.settings.showPopup to true. Shouldn't it re-render

[codingphasedotcom]

Also none of these methods work with litHtml

this.set
this.notifyPath
this.push

I know this is new so there's really no resources to learn this but I'm trying to follow what they have on the documentation.
https://www.polymer-project.org/3.0/docs/devguide/model-data#notifyPath

[LarsDenBakker]

You're looking at the documentation for PolymerElement, which is 'old' Polymer templating syntax. LitElement has the new templating syntax which is much simpler. Check https://github.com/Polymer/lit-element#api-documentation for the API.

Rendering is based on immutable data, so you'd have to do this.settings = { this.settings, showPopup: false } for it to be picked up. I think triggering a render manual is also an expected use case, perhaps this can be done by calling _invalidateProperties: https://github.com/Polymer/lit-element/blob/master/src/lit-element.ts#L256 otherwise it's something that still needs to be added.

[LarsDenBakker]

Actually it looks like _requestRender is what you need, this queues a render: https://github.com/Polymer/lit-element/blob/master/src/lit-element.ts#L251

[codingphasedotcom]

@LarsDenBakker thank you for pointing that out so I figured it out.

on the click function I ran this._requestRender() and it re-rendered.

for anyone who wants a quick example here's the link
https://stackblitz.com/lit-element-example-zkxtyl

[odahcam]

I'm using LitElement@ˆ0.7.1 and the method that updates the element is this.requestUpdate(), just in case any newbie like me lands here.

[wassafshahzad]

I'm using LitElement@ˆ0.7.1 and the method that updates the element is this.requestUpdate(), just in case any newbie like me lands here.

Thanks man