https://github.com/kherrick/web-components-starter

A Web Components starter project
https://github.com/kherrick/web-components-starter

custom-elements ie11 internet-explorer-11 web-components

Last synced: 2 months ago
JSON representation

A Web Components starter project

• Host: GitHub
• URL: https://github.com/kherrick/web-components-starter
• Owner: kherrick
• Created: 2018-06-03T22:30:10.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:20:31.000Z (over 3 years ago)
• Last Synced: 2025-04-12T02:14:30.386Z (about 1 year ago)
• Topics: custom-elements, ie11, internet-explorer-11, web-components
• Language: JavaScript
• Homepage: https://kherrick.github.io/web-components-starter/
• Size: 863 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
web-components-starter

======

## Diving into web components

[![web-components-starter-screenshot](https://raw.githubusercontent.com/kherrick/web-components-starter/master/assets/web-components-starter-screenshot.png)](https://kherrick.github.io/web-components-starter/)

---

## System requirements

  * [Node.js](https://nodejs.org/)

  * [Git](https://git-scm.com/downloads)

  * [bash](https://www.gnu.org/software/bash/)

## Develop using the git repository

### Open a terminal and run the following to build [a view targeting IE11+](https://kherrick.github.io/web-components-starter/) (from IE11, to Edge, Chrome, Firefox, and Safari)

```bash

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](https://www.polymer-project.org/blog/shadydom) only):

  * `npm run start-custom-elements-shady-dom-esm`

Target evergreen browsers supporting [Custom Elements v1](https://developers.google.com/web/fundamentals/web-components/customelements) 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

```bash

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 .

```