WebComponents CLI allow you to develop WebComponents from scratch with LitElement and Typescript.
WebComponents CLI allow you to develop WebComponents from scratch with LitElement and Typescript.
npm install -g @grandemayta/webcomponents-cli
wc-cli <name-of-your-project>
Launch the following commands to start the application:
npm start
Command | Description |
---|---|
npm start | Lift the application in local mode |
npm run dev | Generate a build in dev mode |
npm run prod | Generate a build in prod mode |
npm run dev:legacy | Generate a build in dev mode to support legacy browsers |
npm run prod:legacy | Generate a build in prod mode to support legacy browsers |
Build tasks will create the following output:
dist/
vendor.min.js
bundle.min.js
dist/
polyfills.min.js
webcomponents-loader.js
vendor.min.js
bundle.min.js
bundles/ # These scripts will load at runtime
webcomponents-ce.js
webcomponents-sd-ce-pf.js
webcomponents-sd-ce.js
webcomponents-sd.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Components Example Integration</title>
</head>
<body>
<app-greetings fullname="Charlotte"></app-greetings>
<!-- If you want support legacy browser just remove this comment
<script src="polyfills.min.js" nomodule></script>
<script src="webcomponents-loader.js"></script>
-->
<script src="vendor.min.js"></script>
<script src="bundle.min.js"></script>
</body>
</html>
We support the following features:
Generics
Arrays
Objects
Strings
✅ Chrome ✅ Firefox ✅ Safari ✅ Edge ✅ IE11
Use the official guide to create WebComponents with LitElement
Keep calm and code!