title: Loading static project without webpack or CDNs
body: <p>I would like to statically serve a project, that uses webcomponents (using lit-html), <em>without any packaging tools like webpack etc</em>. </p>
  
  <p>The example project is composed of this structure:</p>
  
  <pre><code>index.html
  app.js
  package.json
  </code></pre>
  
  <p><code>package.json</code>:</p>
  
  <pre><code>{
    "name": "lit",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "@webcomponents/webcomponentsjs": "^2.2.7",
      "lit-element": "^2.0.1"
    }
  }
  </code></pre>
  
  <p><code>app.js</code>:</p>
  
  <pre><code>import { LitElement, html } from 'lit-element';
  
  class FooElement extends LitElement {
    render() {
      return html`&lt;div&gt;hello world!&lt;/div&gt;`;
    }
  }
  window.customElements.define('x-foo', FooElement);
  
  </code></pre>
  
  <p>and finally, <code>index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src="app.js" type="module"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;x-foo&gt;&lt;/x-foo&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I serve this using a static http server and, of course, this doesn't work. The browser raises the error: <code>Error resolving module specifier: lit-element</code>.</p>
  
  <p>So we try altering the <code>import</code> directive to:</p>
  
  <p><code>import { LitElement, html } from './node_modules/lit-element/lit-element.js';</code></p>
  
  <p>The browser then fails with: <code>Error resolving module specifier: lit-html</code> in <code>lit-element.ts:14:29</code></p>
  
  <p>I've tried using <code>systemjs</code> version <code>3.0.1</code> with the following modified <code>index.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script type="systemjs-importmap" src="systemjs.map.json"&gt;&lt;/script&gt;
    &lt;script src="./node_modules/systemjs/dist/system.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app');
    &lt;/script&gt;
    &lt;x-foo&gt;&lt;/x-foo&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and a <code>systemjs.map.json</code> file:</p>
  
  <pre><code>{
    "imports": {
      "app": "./app.js",
      "lit-element": "./node_modules/lit-element/lit-element.js",
      "lit-html": "./node_modules/lit-html/lit-html.js"
    }
  }
  </code></pre>
  
  <p>When loading this (again via a static webserver), we get in Firefox:</p>
  
  <p><code>import declarations may only appear at top level of a module</code> at <code>app.js:1</code>.</p>
  
  <p>In Chrome: 
  <code>Uncaught SyntaxError: Unexpected token {</code> at <code>app.js:1</code></p>
  
  <p>In Safari:
  <code>Unexpected token '{'. import call expects exactly one argument.</code> at <code>app.js:1</code></p>
  
  <p>All of which suggests that <code>systemjs</code> isn't treating <code>app.js</code> as a module. </p>
  
  <p>Is there anyway that we can achieve static loading of modules that have a dependency tree within <code>node_modules</code>?</p>
  
  <p>I've pushed the version of the code with <code>systemjs</code> to <a href="https://github.com/dazraf/lit-test" rel="nofollow noreferrer">https://github.com/dazraf/lit-test</a>.</p>
  
  <p>Thanks.</p>