app-route can’t work with lit-element

[yanishoss]

Due to the data binding lit-element uses, we can’t use app-route and the others iron components that require data binding.

Is there any solution or router for lit-element ?

[Westbrook]

If you really really like working with app-route, you can listen to the data change events that app-route emits manually. Everything that might have been 2-way bound in Polymer will emit an *-changed event. These are outlined here: https://www.webcomponents.org/element/PolymerElements/app-route/elements/app-route#events

Beyond that just about any routing should work great with lit-element, some people use page.js or the pwa-starter-kit is employing the router import from PWA Helpers. Hope that helps!

[web-padawan]

Here is the create-lit-app template which uses Vaadin.Router library, built by our team to fill this gap. See https://github.com/vaadin/vaadin-router

[sorvell]

Lots of different routing approaches should work fine. Take a look at PWA Starter Kit for a great out of the box experience for building web apps with LitElement. It uses a very simple routing approach.

As mentioned, you can listen for the events fired using lit-html (using the new lit-html syntax here that is currently released in the dev tag and will be included in version 0.6 of LitElement).

<app-route .route="${route}" @route-changed="${(e) => this._handleRoute(e)}"></app-route>

[sorvell]

Lots of different routing approaches should work fine. Take a look at PWA Starter Kit for a great out of the box experience for building web apps with LitElement. It uses a very simple routing approach.

As mentioned, you can listen for the events fired using lit-html (using the new lit-html syntax here that is currently released in the dev tag and will be included in version 0.6 of LitElement).

<app-route .route="${route}" @route-changed="${(e) => this._handleRoute(e)}"></app-route>

[markcellus]

Ah yes, there aren't many router libs out there that support Lit Elements (or Web Components at all), but I've started one over at https://github.com/mkay581/router-component. It's pretty lightweight and supports a more html declarative syntax.

[fernandopasik]

PWA Starter kit routing approach is great! I manage to put all this in a route element here: https://github.com/fernandopasik/lit-redux-router

Feedback and contributions are very much welcomed!!

[eskan]

There's some nice vanilla router like pagejs : https://visionmedia.github.io/page.js/ it works fine with LitElement

[hamedasemi]

I would suggest https://www.npmjs.com/package/lit-element-router

[sipi]

I tried to use app-location/app-route with event handler but as we set the route property with ".route="${route}"" (so in the render method), changes made by the "@route-changed" handler is not reflected. Indeed, event is sent, caught and processed after the render method but before the updated one ! And changes made during this interval are not rendered as noticed in render and update method documentation "Setting properties inside this method will not trigger the element to update." :(

But, good news, I tried the https://github.com/vaadin/vaadin-router mentioned above and it seems to work very well :) !