Router should bind a elements on document.

[Dav1dde]

A setup like this with having a links in the nav and footer does not work, because the nav and footer are not enclosed in the router:

     view! { cx,
            nav() {
                Nav()
            }
            main(class="max-w-screen-xl px-5 xl:px-0 w-full flex-auto self-center") {
                Router()
            }
            footer() {
                Footer()
            }
        }
    }

The router should bind to the document instead of the enclosed view only or have an option to pass an element selector to use.

[lukechu10]

Generally I would just recommend hoisting your Router to the top of your App so that everything gets rendered under the Router. Is there a reason why you can't do that?

Personally, I find the current behavior more intuitive since click events only get captured if they are inside a Router.

[Dav1dde]

My switch function for the router selects a page based on the route, the page has associated data which needs to be fetched before it can be rendered and displayed. During this downtime the router can already show a loading view etc.

Now technically it would be possible to move my layouting into the router, I prefer the current setup because my router abstraction is technically standalone and contains no application specific layouting/code, which is a nice separation of concernes and still keeps the structure hierarchical layout -> router -> page content. I don't like the alternative of passing Fn into my router which produces the necessary layout for every route change.

While also probably not relevant it reduces the amount of nodes that need to be rendered on a route change.

An alternative solution could also be move the click event binding code to a separate component.