LitElement Router

A simple and lightweight LitElement Router.

Installation

npm install lit-element-router --save

Usage

Working example

You can find a working project on StackBlitz https://stackblitz.com/edit/lit-element-router

Minimal

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {

    static get routes() {
        return [{
            name: 'home',
            pattern: '',
            data: { title: 'Home' }
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }];
    }

    onRoute(route, params, query, data) {
        console.log(route, params, query, data)
    }
}

customElements.define('my-app', MyApp);

Complete Example Using JavaScript Mixins in Details

Dont like mixins check out other examples

Don't want to use mixins interface you cane use a simple version in this tutorial: https://github.com/hamedasemi/lit-element-router/blob/mainline/README_NOT_MIXIN.md

Make any arbitary components or elements to a router using router mixins method

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {

}

customElements.define('my-app', MyApp);

Register routes and the onRoute function

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {
    static get routes() {
        return [{
            name: 'home',
            pattern: ''
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }];
    }

    onRoute(route, params, query, data) {
        this.route = route;
        this.params = params;
    }
}

customElements.define('my-app', MyApp);

Make any arbitary components or elements to a router outlet using router outlet mixins method

import { LitElement, html } from 'lit-element';
import { routerOutletMixin } from 'lit-element-router';

export class AnyArbitaryLitElement extends routerOutletMixin(LitElement) {
    
}

customElements.define('any-arbitary-lit-element', AnyArbitaryLitElement);

Put the components under router outlet

import { LitElement, html } from 'lit-element';
import { routerMixin } from 'lit-element-router';

class MyApp extends routerMixin(LitElement) {
    static get routes() {
        return [{
            name: 'home',
            pattern: ''
        }, {
            name: 'info',
            pattern: 'info'
        }, {
            name: 'user',
            pattern: 'user/:id'
        }, {
            name: 'not-found',
            pattern: '*'
        }];
    }

    onRoute(route, params, query, data) {
        this.route = route;
        this.params = params;
    }

    render() {
        return html`
            <any-arbitary-lit-element current-route='${this.route}'>
                <div route='home'>Home any-arbitary-lit-element</div>
                <div route='info'>mY Info any-arbitary-lit-element</div>
                <div route='user'>User ${this.params.id} any-arbitary-lit-element</div>
                <div route='not-authorized'>Not Authorized any-arbitary-lit-element</div>
                <div route='not-found'>Not Found any-arbitary-lit-element</div>
            </any-arbitary-lit-element>
        `;
}

customElements.define('my-app', MyApp);

Make any arbitary components or elements to a router link using router link mixins method

import { LitElement, html } from 'lit-element';
import { routerLinkMixin } from 'lit-element-router';

export class AnArbitaryLitElement extends routerLinkMixin(LitElement) {
    
}

customElements.define('an-arbitary-lit-element', AnArbitaryLitElement);

Navigate using the router navigate method

import { LitElement, html } from 'lit-element';
import { routerLinkMixin } from 'lit-element-router';

export class AnArbitaryLitElement extends routerLinkMixin(LitElement) {
    constructor() {
        super()
        this.href = ''
    }
    static get properties() {
        return {
            href: { type: String }
        }
    }
    render() {
        return html`
            <a href='${this.href}' @click='${this.linkClick}'><slot></slot></a>
        `
    }
    linkClick(event) {
        event.preventDefault();
        this.navigate(this.href);
    }
}

customElements.define('an-arbitary-lit-element', AnArbitaryLitElement);

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions