A simple Hello World for LitElement.

https://start-lit-element.firebaseapp.com/

• Quick start
• Detailed setup info
• Browser compatibility and performance

npm install -g polymer-cli
git clone https://github.com/PolymerLabs/start-lit-element
cd start-lit-element
npm install
polymer serve

• Clone
• Serve
• Setup
• Build
• Deploy

git clone https://github.com/PolymerLabs/start-lit-element

npm install -g polymer-cli
cd start-lit-element
npm install
polymer serve

1. In index.html, update metadata stuff:

<!-- Change stuff here for your app -->
<meta name="description" content="start-lit-element">
<meta name="theme-color" content="#ffffff">
<title>start-lit-element</title>

2. In index.html, uncomment the service worker registration code:

<!-- Register service worker if supported. -->
<!--
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
  }
</script> -->

3. In manifest.json, update the app description, etc:

"description": "start-lit-element",
"start_url": "index.html",
"name": "start-lit-element",
"short_name": "start-lit-el",
"background_color": "#ffffff",
"theme_color":"#ffffff",

4. Update your package.json if required

5. In polymer.json, update your shell & entrypoint if required

"shell": "src/start-lit-element.js",
"entrypoint": "index.html",

6. Remember to update firebase.json and .firebaserc for a real deployment!

Build your project and serve the build locally:

polymer build
polymer serve build/default

If you changed significant stuff (e.g. filenames, folder structure, installed other modules, etc), edit your polymer.json file to configure your build correctly. See the Polymer CLI documentation for more info.

1. Set up Firebase CLI tools.

2. Create a new Firebase project.

3. Update firebase.json and .firebaserc with your own app details.

4. Deploy.

   firebase deploy
   

See the Firebase CLI Reference for more info.

At the time of writing (Dec 11 2018) this app was scoring 100% on all Lighthouse audits when deployed, and was working fine on the most recent versions of Chrome, Safari, Firefox, and Edge.

Let me know of any issues.

(All browsers) Dynamic import warning:

Could not resolve module specifier "require" in file "..src/start-lit-element.js".

See Polymer/tools#131.

(IE11 and Edge) Warning due to <!--! in built HTML:

Unexpected character: U+0021 EXCLAMATION MARK (!)
Unexpected character in comment end. Expected "-->"

See https://github.com/Polymer/polymer-cli/issues/779.