README
Drop-in router.
Usage
Hash router
<script src="https://unpkg.com/@aaronshaf/html-router@1/hash.js" type="module"></script>
Render first match (example)
<ul>
<li><a href="#/foo">Foo</a></li>
<li><a href="#/bar">Bar</a></li>
<li><a href="#/baz">Baz</a></li>
</ul>
<hash-switch>
<template data-path="/foo">
<h1>Foo</h1>
</template>
<template data-path="/bar">
<h1>Bar</h1>
</template>
<template data-path="(.*)">
<h1>Not found</h1>
</template>
</hash-switch>
Standalone routes (example)
<ul>
<li><a href="#/">Home</a></li>
<li><a href="#/foo">Foo</a></li>
<li><a href="#/foo/bar">Foo and Bar</a></li>
</ul>
<hash-route path="/">
<h2>Home</h2>
</hash-route>
<hash-route path="/foo(.*)">
<h2>Foo</h2>
</hash-route>
<hash-route path="/foo/bar">
<h2>Bar</h2>
</hash-route>
Pathname router
<script src="https://unpkg.com/@aaronshaf/html-router@1/pathname.js" type="module"></script>
Render first match (example)
<ul>
<li>
<pushstate-link><a href="/foo">Foo</a></pushstate-link>
</li>
<li>
<pushstate-link><a href="/bar">Bar</a></pushstate-link>
</li>
<li>
<pushstate-link><a href="/baz">Baz</a></pushstate-link>
</li>
</ul>
<pathname-switch>
<template data-path="/foo">
<h1>Foo</h1>
</template>
<template data-path="/bar">
<h1>Bar</h1>
</template>
<template data-path="(.*)">
<h1>Not found</h1>
</template>
</pathname-switch>
Standalone routes (example)
<ul>
<li>
<pushstate-link><a href="/foo">Foo</a></pushstate-link>
</li>
<li>
<pushstate-link><a href="/foo/bar">Foo & Bar</a></pushstate-link>
</li>
</ul>
<pathname-route path="/foo(.*)">
<h2>Foo</h2>
</pathname-route>
<pathname-route path="/foo/bar">
<h2>Bar</h2>
</pathname-route>
Access match params
Custom elements that are children of a route or switch can access match data at this.match.
Prevent flash of undefined content
<style>
hash-switch:not(:defined),
pathname-switch:not(:defined) {
visibility: hidden;
}
</style>
Web components polyfill
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2/webcomponents-loader.js"></script>