Router ExampleUsage

class AppRoutes extends LitElement {
    render() {
        return html`
            <domx-route
                id="#usersList"
                pattern="/users"
                element="user-list"
                append-to="body"
            >
            <domx-route
                route-from="#usersList"
                id="userPage"
                pattern="/:userId"
                element="user-page"
                append-to="#user-list-user-container"
                @route-active="${this.userPageRouteActive}"
                @route-inactive="${this.userPageRouteInActive}"
            ></domx-route>
            <div id="user-list-user-container"></div>
        `;
    }

    userPageRouteActive(event) {
        // import lazy modules if needed
        import("../user-page");

        // the element would be created with route data as attributes
        // in this case there would be a "userId" attribute added
        const element = event.detail.element;

        // the element that triggered the route if available
        const trigger = event.detail.sourceElement;

        // stops route from appending the element
        // so custom behaviors such as animation can be applied
        event.preventDefault(); 
    }

    userPageRouteInactive(event) {
        // has the same event detail with the same properties
        // keeps the route from removing the element from the dom
        event.preventDefault();
    }
}

class UserPage extends LitElement {
    @property({attribute: false})
    parentRoute:Route = null;

    render() {
        return html`
            <domx-route
                parent="${this.parentRoute}"
                pattern="/users"
                element="user-list"
                append-to="body"
            ></domx-route>
        `;
    }
}

Properties

• path - the URL path used to match against. The default is current page URL (the window.location.pathname)
• pattern - the path to match against; accepts wildcards /path/:wildcard/path/:wildcard2
• element - the element to create, not required
• append-to - can be "body" or a query selector used against the closest root node. The default is to append the element after the route element itself.
• tail - read-only – The part of path NOT consumed by pattern (added as a routePath attribute on the element created).
• cache - set to true to cache elements when routeData changes
• cache-count - the number of elements to keep in the cache using sliding fifo
• route-from - a query for the parent to locate a route to use as a parentRoute

Events

• route-active – receives the created element and can call stopPropagation() to override insertion behavior / add animation. Should also receive the source element / link that caused the route to match. This is where a dynamic import can also be called if lazy loading a module.
• route-inactive – behaves the same as route-active

Notes

Navigating back / closing an element - Can use window.history.back()

Tab navigation

Two scenarios, a user clicks a link or programmer uses replaceState. Either scenario, uses Router.replaceState, if link dev needs to call preventDefault(); This is excellent candidate for sub routes.

Example Using Navigate

class TeamPage extends LitElement {

    parentRoute:Route;

    const tabs = [{
        id="games",
        title: "Games",
        pattern: "/games"
    }]

    @queryAll("domx-route")
    routes:Array<DomxRoute>

    return {
        html`
            <team-tabs>
                ${this.tabs.map(tab => html`
                    <team-tab @click="${this.clickTab(tab.id)}">${tab.title}</team-tab>
                `)}
            </team-tabs>
            ${this.tabs.map(tab => html`
                <domx-route
                    id="${tab.id}"
                    .parentRoute="${this.parentRoute}"
                    pattern="${tab.pattern}"
                    element="team-roster"
                    append-to="parent"
                ></domx-route>
            `)}            
        `;
    }

    clickTab(tabId:string) {
        return (event) => {
            // navigate uses replaceState(parentroute.prefix + pattern)
            this.routes.find(r => r.id === tabId).navigate();
        };
    }
}

Example Using Links

More simple than using navigate since there would be no need for the click event handler and call to navigate