title: webpack index.js simple-wc-router setup
body: <p>Best way to setup a SPA router with lit-element and simple-wc-router using webpack.</p>
  
  <p>I currently have this working but am wondering if there is a better way to put this all together. </p>
  
  <p>webpack-config.js:</p>
  
  <pre><code>module.exports = ({ mode, presets }) =&gt; {
    return webpackMerge(
    {
      entry: {
      app: './src/index.js'
    },
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import './app-router.js';
  window.addEventListener('load', () =&gt; {
      initRouter();
  });
  
  function initRouter() {
    var approuter = document.createElement("app-router");
    document.getElementsByTagName("BODY")[0].append(approuter);
  }
  </code></pre>
  
  <p>app-router.js</p>
  
  <pre><code>import { LitElement, html } from 'lit-element';
  import { Router } from 'simple-wc-router';
  import './ui/side-panel.js';
  import './admin/admin-home.js';
  
  class AppRouter extends Router(LitElement) {
      static get routes() {
          return [
          {
              path: "/admin",
              component: 'admin-home',
              import: () =&gt; {
                console.log('path /admin...');
                import(/* webpackChunkName: "adminutils" */ './admin/admin-home');
              }
  
          },
          {
            path: '/admin/billing',
            component: 'admin-billing',
            import: () =&gt; import(/* webpackChunkName: "adminutils" */ './admin/admin-billing')
          },
  
          {
            path: "*",
            component: 'not-found-view',
            import: () =&gt; import(/* webpackChunkName: "not-found-view" */ './views/not-found-view')
          }
      ];
  }
  </code></pre>
  
  <p>This currently works.  But in order to use the app-router element which has the routing logic, I have to append a HTML element.  </p>
  
  <p>Per LitElement docs: <a href="https://lit-element.polymer-project.org/guide/use" rel="nofollow noreferrer">https://lit-element.polymer-project.org/guide/use</a> the way to use a component after importing would be </p>
  
  <pre><code>&lt;app-router&gt;&lt;/app-router&gt;
  </code></pre>
  
  <p>I could not find a way to use a web component without the html part, hence: document.getElementsByTagName("BODY")[0].append(approuter);</p>
  
  <p>Is there a more elegant way to use the app-router web component?</p>
  
  <p>Is there a better way to set up the routing component assuming we're using webpack?</p>