Skip to content

Instantly share code, notes, and snippets.

@ZiTAL

ZiTAL/01.sh

Last active June 17, 2020 20:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ZiTAL/a61f10ef79e53d0cd428cc03d3ec4e07 to your computer and use it in GitHub Desktop.
Save ZiTAL/a61f10ef79e53d0cd428cc03d3ec4e07 to your computer and use it in GitHub Desktop.
Download ZIP
lit-element: webpack example
Raw
01.sh
mkdir -p /home/projects/lit/src/components
cd /home/projects/lit
npm init -y
npm install lit-element webpack webpack-cli --save-dev
touch index.html
touch src/index.js
touch src/components/progress-bar.js
Raw
build.sh
# builds dist/main.js with webpack
npm start
Raw
index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<progress-bar></progress-bar>
<script src="dist/main.js"></script>
</body>
</html>
Raw
index.js
// /home/projects/lit/src/index.js
import "./components/progress-bar.js"
Raw
package.json
{
"name": "lit",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lit-element": "^2.3.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
Raw
progress-bar.js
// /home/projects/lit/src/components/progress-bar.js
import {LitElement, html} from 'lit-element';
class ProgressBar extends LitElement {
render() {
return html`
<div>Hello from MyElement!</div>
`;
}
}
window.customElements.define('progress-bar', ProgressBar);
Raw
server.sh
php -S localhost:8000
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment