web-components-starter

web-components-starter

A Web Components starter project

---

System requirements:

• Node.js

Develop using the npm module:

Create a new project directory

mkdir -p hello-web-components \
 && cd hello-web-components \
 && npm init -y

Install the npm module

 npm i web-components-starter

Copy the starter index.html to the root of the project

cp node_modules/web-components-starter/dist/build-ie11-iife/index.html ./

Update the path to the module

export C=container I=index N=iife WCS=web-components-starter \
 && sed "s#./$N/main.js#./node_modules/$WCS/dist/build-ie11-$N/$N/main.js#g" ./$I.html > $I.html.new \
 && mv index.html.new index.html

Serve the project

npx serve -s .

Develop using the git repository:

Open a terminal, clone this repository, and run one of the following in the root of the project:

• npm run start - by default builds a view targeting IE11+ (from IE11, to Edge, Chrome, Firefox, and Safari)

• npm run start-custom-elements-shady-dom - targeting browsers after IE11 (a Custom Elements v1 and shady DOM polyfill only)

• npm run start-no-polyfills - targets evergreen browsers supporting Custom Elements v1 and shadow DOM (builds a minimal view in a "vanilla js" style)