web-components-starter

Diving into web components

---

System requirements

• Node.js
• Git
• bash

Develop using the git repository

Open a terminal and run the following to build a view targeting IE11+ (from IE11, to Edge, Chrome, Firefox, and Safari)

git clone https://github.com/kherrick/web-components-starter &&\
  cd web-components-starter &&\
  npm i &&\
  npm start

Other Builds

Target browsers after IE11 (a Custom Elements v1 and shady DOM polyfill only):

• npm run start-custom-elements-shady-dom-esm

Target evergreen browsers supporting Custom Elements v1 and shadow DOM (builds a minimal view in a "vanilla js" style):

• npm run start-no-polyfills-iife

Develop using the npm module

Create a new IE11 build

repo=web-components-starter &&\
  build=build-ie11-iife &&\
  mkdir -p hello-web-components &&\
  cd hello-web-components &&\
  npm init -y &&\
  npm i $repo &&\
  cp node_modules/$repo/dist/$build/index.html ./ &&\
  sed -i.bak\
    "s#./iife/main.js#./node_modules/$repo/\dist/$build/iife/main.js#g"\
     index.html &&\
  rm index.html.bak &&\
  npx serve -s .