Web Components Demo

Basic demonstration of building a web component using vanilla JavaScript compared to LitElement.

Also integrates some visual diff testing.

Resources

Web Components

• Vanilla Custom Elements Overview
• Open-WC Project
• Polyfill
• LitElement
• LitHtml
• Custom Elements Everywhere

Visual Diff

• Visual Diff Library
• Puppeteer
• PixelMatch
• Percy.io
• Chromatic
• SauceLabs

Setup

Clone the repo and run:

npm install

Run the Demos

To start a development server that hosts the demos, run:

npm run start

Then visit the URL output to the console.

By default, index.html loads the vanilla web component (vanilla.js). To use Lit instead, switch it to load lit.js.

Visual Diff Testing

To set a baseline set of golden screenshots, run:

npm run visual-diff:golden

To compare against the goldens, run:

npm run visual-diff